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调用完成之后，需要使用调用任何使用状态的函数。有两种方法可以执行此操作：如果componentDidUpdate与this.state.talents不同，请使用prevState.talents来触发函数。或者，使用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();
});

尝试像这样调用ur方法，它将起作用

为什么我的数组未在React的状态下更新？

2 个答案: