为什么我在setState后读取不到最新的state
内容提要
setState函数在React中的运行机制是，它会用最新的state值去请求一个新的烘托，但正在运行的函数中的值不会受到影响。State表现为一个快照，组件在被调用时会为该次烘托提供一个state快照，然后根据这个快照计算出的值来执行烘托。在一次烘托中，state变量的值不会发生变化，因此正在运行的函数不会受到影响。解决这个问题的方法是，在更新state之前将其保存在一个变量中，然后将保存的变量传递给set函数。另外，如果需要在一次事务中多次更新同一个state，可以使用更新函数来实现。
关键要点
-
setState函数在React中请求新的烘托，但不影响正在运行的函数中的值。
-
React会用最新的state值请求新的烘托，组件会根据state快照计算值。
-
state表现为快照，组件在调用时提供该次烘托的state快照。
-
在一次烘托中，state变量的值不会变化，导致多次setState只增加1而不是3。
-
异步操作不能改变正在运行的函数中的state值，定时器输出的值仍然是旧值。
-
解决方案是将下一个状态保存在变量中，然后传递给set函数。
-
React会在事件处理函数结束后处理state更新，形成一个队列。
-
使用更新函数可以实现多次更新同一个state的预期结果。
延伸问答
为什么在调用setState后，读取到的state值不是最新的？
因为setState请求新的烘托，但不影响正在运行的函数中的state值，state表现为快照。
如何在React中正确更新state以获取预期结果？
可以将下一个状态保存在一个变量中，然后将该变量传递给set函数。
在React中，为什么多次调用setState只增加1而不是3？
因为每次setState都是基于同一个快照进行的，导致每次更新都是在上一次快照的基础上加1。
异步操作如何影响正在运行的函数中的state值？
异步操作不会改变正在运行的函数中的state值，定时器输出的值仍然是旧值。
如何在一次事件中多次更新同一个state？
可以使用更新函数，例如setNumber(n => n + 1)，来实现多次更新的预期结果。
React是如何处理state更新的？
React会在事件处理函数结束后处理state更新，形成一个更新队列。
