ReactJS多次setState后arr.map()返回undefined问题求助

嘿，我一眼就看出问题出在哪了！你之前的正常代码里，this.state.data是一个一维的issue对象数组，但后来修改setState的时候，你把myJson.issues整个数组作为一个元素塞进了data里——这就导致data变成了数组套数组的结构！

举个例子：假设原来data是[issue1, issue2]，新的myJson.issues是[issue3, issue4]，你现在的写法会让data变成[[issue1, issue2], [issue3, issue4]]。这时候你用map遍历data，每个item都是一个子数组，而子数组根本没有id、example这些属性，所以返回的对象里这些值自然都是undefined啦！

第一步：修正setState的写法 #

你需要把新获取到的myJson.issues里的每一个元素都展开合并到原数组中，而不是把整个数组当元素添加。把setState的代码改成这样：

.then((myJson) => this.setState({data: [...this.state.data, ...myJson.issues]}));

这里用了两个扩展运算符...，第一个展开原data数组的元素，第二个展开myJson.issues的元素，最终得到的是一个一维的issue对象数组，和你之前正常工作时的结构一致。

第二步：注意setState的异步特性 #

另外还要提醒你：setState是异步执行的！如果你在调用setState之后立刻去map this.state.data，很可能拿到的还是更新前的旧状态。所以如果要在状态更新后立刻处理数据，应该用setState的回调函数：

.then((myJson) => {
  this.setState(
    {data: [...this.state.data, ...myJson.issues]},
    () => {
      // 这里的代码会在状态更新完成后执行
      const result = this.state.data.map(item => ({
        id: item.id,
        example: item.example
      }));
      console.log(result);
    }
  );
});

修正后的完整代码示例 #

fetchTable() {
  const url = 'http://localhost:8000/issues/assigned/';
  const value = this.state.selectedOption;
  const string = url + value;
  fetch(string)
    .then(function(response) {
      return response.json();
    })
    .then((myJson) => {
      this.setState(
        {data: [...this.state.data, ...myJson.issues]},
        () => {
          const result = this.state.data.map(item => ({
            id: item.id,
            example: item.example
          }));
          console.log(result);
        }
      );
    });
}

这样修改后，你的map操作就能正常拿到每个issue对象的属性，不会再返回undefined啦！

内容的提问来源于stack exchange，提问作者zemmsoares