为什么我的数组在 React 中的状态没有更新？ [复制]

Question

在调用this.setState 之后，talents 属性仍然保持旧值：

onTalentModalCheckboxChange(e) {
  debugger;
  var talent = JSON.parse(e.target.dataset.talent);
  talent.checked = !talent.checked;

  if (this.maximumSelectedTalentsReached() && talent.checked) return;

  const talentIndex = this.state.talents.findIndex(t => t.Id == talent.Id);
  let updatedTalents = [...this.state.talents];
  updatedTalents[talentIndex] = talent;

  this.setState({ talents: updatedTalents });

  // this method (setSearchResultsTotal) uses this.state.talents, 
  // but the talent that is updated here, is not updated. 
  // It still has the 'old' checked value
  this.setSearchResultsTotal();
}

talents 属性包含 Talent 对象列表，这些对象都具有 checked 属性。我的问题是在设置更新的天赋对象时

我在这里错过了什么？

Answer 1

setState 是异步的，这意味着更改不会立即发生。因此，任何使用状态的函数都需要在setState 调用完成后调用。有两种方法可以做到这一点：如果this.state.talents 与prevState.talents 不同，则使用componentDidUpdate 触发函数。或者，使用setState 回调调用函数：

onTalentModalCheckboxChange(e) {
  debugger;
  var talent = JSON.parse(e.target.dataset.talent);
  talent.checked = !talent.checked;

  if (this.maximumSelectedTalentsReached() && talent.checked) return;

  const talentIndex = this.state.talents.findIndex(t => t.Id == talent.Id);
  let updatedTalents = [...this.state.talents];
  updatedTalents[talentIndex] = talent;

  // Only call this.setSearchResultsTotal after state has finished updating
  this.setState({ talents: updatedTalents }, () => this.setSearchResultsTotal(); );

}

Answer 2

this.setState({ talents: updatedTalents }, () => {
  this.setSearchResultsTotal();
});

尝试像这样调用你的方法，它会工作