Question

我在收到数据后尝试在对象数组上使用this.setState，但是，下面的代码只在1个对象上设置状态。我认为这是在写自己。

路径：MongoDB

"careerHistoryPositions": [
    {
      "company": "Company A",
      "title": "Title A",
      "uniqueId": "1497575516964"
    },
    {
      "company": "Company B",
      "title": "Title B",
      "uniqueId": "1497575525034"
    }
  ]

路径：Reactpage

constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

componentWillReceiveProps(nextProps) {
    const profileCandidateCollection = nextProps.profileCandidate;
    const profileCandidateCollectionId = profileCandidateCollection._id;
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions;

    if(careerHistoryPositions) {
      careerHistoryPositions.map((position) =>
      this.setState({
        data: [{
          'position.uniqueId': position.uniqueId || '',
          'position.company': position.company || '',
          'position.title': position.title || ''
        }]
      })
      );
    }
  }

Answer 1

请注意，不会立即调用set state，其次，您将使用新状态覆盖数据。其次，设置State多次会重新渲染，这是低效的。

停止覆盖，您可以使用传播运算符。示例：

a = [1,2,3]
b = [...a, 4,5]
//b = [1,2,3,4,5]

所以要将它转换为您的代码，它看起来像这样：

this.setState({
        data: [...this.state.data, {
          'position.uniqueId': position.uniqueId || '',
          'position.company': position.company || '',
          'position.title': position.title || ''
        }]
      })

由于您多次调用状态，因此效率仍然很低。我会把它改成这样：

if(careerHistoryPositions) {
      const newData = careerHistoryPositions.map((position) =>
      ({
            'position.uniqueId': position.uniqueId || '',
            'position.company': position.company || '',
            'position.title': position.title || ''
      }));
      this.setState({
          data: newData
      })
}

Answer 2

 if(careerHistoryPositions) { 
    const data = [ ];
    careerHistoryPositions.map((position) =>
    data.push(
{
 'position.uniqueId': position.uniqueId || '',
 'position.company': position.company || '',
 'position.title': position.title || '' 
})
);

     this.setState({ data, }); 
    }

这应该有用..我认为这种方法会更好，而不是在map函数中多次设置状态..

带有映射的this.setState自身写入

2 个答案: