Question

在以下代码中，当第一个元素（a）传递给checkBoxClicked函数时，第2行中的console.log（id）打印一个，但console.log（this.state.dealIdToUnSave）在应打印的位置打印[] [a]。

稍后，当另一个元素（比如说b）传递给checkBoxClicked函数时，console.log（id）打印b，但是console.log（this.state.dealIdToUnSave）仅打印[a]，尽管它应该打印[a] ，b]

任何明显的原因可能会发生吗？

checkBoxClicked = (id) => {
        console.log(id);
        this.setState({
            dealIdToUnSave: [...this.state.dealIdToUnSave, id]
        });
        console.log(this.state.dealIdToUnSave);
    }

Answer 1

由于setState是异步的，因此您可以在作为第二个参数传递给setState的回调函数中记录状态更改。

checkBoxClicked = (id) => {
  console.log(id);
  this.setState({
    dealIdToUnSave: [...this.state.dealIdToUnSave, id]
  }, () => {
    console.log(this.state.dealIdToUnSave);
  });
}

Answer 2

状态更改可能不会立即发生。this.setState文档中将其明确指出为

将setState（）视为请求而不是立即命令来更新组件。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不能保证状态更改会立即应用。

最后一个元素未添加到状态元素的数组中

2 个答案: