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

Question

在下面的代码中，当第一个元素(a(被传递给checkBoxClicked函数时，第2行的console.log(id(会打印一个console.log。log(this.state.dellIdToUnSave(会打印[]，因为它应该打印[a]。

稍后，当另一个元素(比如说b(被传递给checkBoxClicked函数时，console.log(id(会打印b，但console.log(this.state.dellIdToUnSave(只打印[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并不保证立即应用状态更改。