Javascript 在handleChange、setState和映射数组上，根据setedState使用新项

我试图用旧数组动态地填充新数组，这取决于settedState中的id，下面是代码。 我不能去上班

    handleChange: function (e) {
    var self = this;
    this.setState({ targetid: e.target.value });
    var newArr = [];
    newArr = this.state.data.filter(function(item){
        return item.id === self.state.targetid;
    }).map(function (item) {
        return item;
    })

    this.setState({targetArr : newArr})
}

我真的不知道怎么做，如果有人需要更多的解释，请告诉我。

设置状态不是一个同步函数，您尝试在写入之前读取状态。您可以访问targetid，而无需将其设置为状态。请尝试以下代码：

handleChange: function (e) {
  var targetid = e.target.value;

  var newArr = this.state.data.filter(function(item){
    return item.id === targetid;
  });

  this.setState({
    targetArr: newArr,
    targetid: targetid
  });
}

setState不是同步函数，您尝试在写入之前读取它的状态。您可以访问targetid，而无需将其设置为状态。请尝试以下代码：

handleChange: function (e) {
  var targetid = e.target.value;

  var newArr = this.state.data.filter(function(item){
    return item.id === targetid;
  });

  this.setState({
    targetArr: newArr,
    targetid: targetid
  });
}

无论何时使用setState方法，react都会再次为更改呈现组件，因此在任何情况下使用多个setState都不是一个好主意。始终尝试在所有计算结束时使用setState。在这种情况下，您面临的问题仅限于此，请删除第一个设置状态并直接使用e.target.value过滤掉元素，然后在最后一个使用设置状态中，它将起作用。试试这个：

_handleChange: function (e) {
     let targetId = e.target.value;

     let newArr = this.state.data.filter((item)=>{
           return item.id === targetId;
     });

     this.setState({
        targetArr: newArr,
        targetid: targetId
     });
}

无论何时使用setState方法，react都会再次为更改呈现组件，因此在任何情况下使用多个setState都不是一个好主意。始终尝试在所有计算结束时使用setState。在这种情况下，您面临的问题仅限于此，请删除第一个设置状态并直接使用e.target.value过滤掉元素，然后在最后一个使用设置状态中，它将起作用。试试这个：

_handleChange: function (e) {
     let targetId = e.target.value;

     let newArr = this.state.data.filter((item)=>{
           return item.id === targetId;
     });

     this.setState({
        targetArr: newArr,
        targetid: targetId
     });
}

---

你说得对，这样做要好得多。虽然它没有添加到状态数组中，但我想这是因为target是一个字符串，无法与int-id进行比较？如果您想确保可以在浏览器开发工具上设置断点以查看item.id的类型，或者如果它是必须强制转换targetid的数字，则可以设置console.logtypeof item.id。var targetid=Numbere.target.value；你说得对，这样做要好得多。虽然它没有添加到状态数组中，但我想这是因为target是一个字符串，无法与int-id进行比较？如果您想确保可以在浏览器开发工具上设置断点以查看item.id的类型，或者如果它是必须强制转换targetid的数字，则可以设置console.logtypeof item.id。var targetid=Numbere.target.value；