React中setState函数的工作机制及连续调用正确性探讨

场景示例：从牌组选一张牌存入state chosenCard，之后执行以下操作：

setMyCards(prevState => [...prevState, {...chosenCard}])
setChosenCard(null)

问题：这样操作是否可行？由于状态更新是异步的，第一个函数能否在第二个函数之前正常执行？如果可以，原因是什么？在更复杂的场景中，是否可能出现第二个函数先修改状态导致第一个函数执行错误的情况？

1. 这样的操作是否可行？ #

完全可行，这段代码能正常实现「将选中的牌加入手牌、清空选中牌」的需求。

2. 第一个函数能否在第二个之前正常执行？ #

从代码调用顺序来说，setMyCards和setChosenCard是同步依次触发的，但React的状态更新本身是异步批量处理的。不过你完全不用担心顺序问题：

• 你在setMyCards里用了函数式更新（接收prevState参数的写法），这里的chosenCard是当前渲染周期里的快照值——也就是你选中的那张牌的真实数据，不会被后面的setChosenCard(null)影响，因为状态更新不会同步改变当前执行上下文里的变量值。
• 哪怕React内部是批量处理这两个状态更新，setMyCards也能正确拿到myCards的前状态和有效的chosenCard值，最终结果完全符合预期。

3. 复杂场景下会不会出现第二个函数先修改状态导致第一个执行错误？ #

只要你保持函数式更新的写法，就不会出现这种问题：

• 函数式更新里的prevState是React专门传递的最新待更新状态，不受其他状态更新的影响；而chosenCard在当前执行栈里是固定的快照，后续的setChosenCard不会同步修改这个变量。
• 如果你改成直接依赖当前状态的写法（比如setMyCards([...myCards, chosenCard])），那在非批量更新的场景（比如setTimeout、Promise回调里），可能会因为异步状态更新拿到旧的myCards值，但你的写法从根源上避免了这个问题。

内容的提问来源于stack exchange，提问作者aabb