为什么我对处于状态的数组的更新的第一次迭代没有出现?它只会在第二次迭代后出现

Question

我在Main.js.上的状态中定义了一个数组postArray

this.state ={
step: 1, 
// welcome
qNumber:1,
accountNumber:'',
amount:'',
txNumber:1,
postArray : []
}

我在Main.js上还有一个函数，它将新的数组元素插入postArray:

insertTx =() => {
// save transaction to array state
// create copy of the array
const copyPostArray = Object.assign([],this.state.postArray)
// insert one element into the array
copyPostArray.push({
txNumber: this.state.txNumber+"-"+this.state.accountNumber,
qNumber : this.state.qNumber,
accountNumber : this.state.accountNumber,
amount :   this.state.amount
})
// save the values back to array state
this.setState({
postArray:copyPostArray
})
console.log(this.state.postArray)
console.log(this.state.txNumber)
console.log(this.state.qNumber)
console.log(this.state.accountNumber)
console.log(this.state.amount)
}

在CashDeposit.js上，每当我调用下面的InsertTx函数时，postArray都会更新：

continue = e => {
e.preventDefault();
this.props.nextStep();
//increment the txNumber
// this.props.incTxNumber();
this.props.insertTx();

在console.log上查看postArray，它在第一次迭代时显示了一个空数组。但对于第二次迭代，它会显示第一次的值，第三次迭代会显示第二次的值等等。为什么它不更新当前值？

Answer 1

setState不会立即发生。在进行下一次渲染之前，状态将始终是相同的值。如果您更新状态，那么在相同的循环参考状态下，您将获得旧状态。如果你运行类似的程序，这会让你看起来落后一个

this.setState(newValues) 
console.log(this.state) // old values

确保在引用状态时不依赖其他函数的setState。这就是钩子和useEffect派上用场的地方。

Answer 2

您看到的问题是由setState没有立即设置状态这一事实引起的，您可以将其视为异步操作。因此，当你试图记录状态值时，你会得到旧的值，因为状态还没有改变。

为了访问新的状态值，可以将回调作为第二个参数传递给setState：this.setState(newState, updatedState => console.log(updatedState))

Answer 3

这是因为setState()不会立即更新状态。直到下次调用render()时，您才会看到更新后的状态。由于React的协调方式，这是非常快的，因为在所有setState()调用都被清空之前，React不会尝试构建DOM。但这也意味着，虽然你不能立即在控制台中看到新状态，但你可以放心，在它出现在浏览器中之前，你最终会看到它。

然而，这确实意味着您需要确保在代码中处理了初始状态条件。例如，如果你没有在构造函数中设置你的状态，你将至少有一个需要在没有未定义状态抛出错误的情况下进行渲染的地方。