React Native useState钩子异常：同时调用两个setState时其中一个不生效

核心原因 #

你遇到的问题大概率是useState的闭包特性+异步批量更新导致的：

• useState的更新是异步的，且在同一个事件回调里调用多个setState时，React会批量处理这些更新。
• 你用!showReactions更新状态时，这个值是回调函数创建时捕获的旧状态值。如果setSelectedMessage触发的组件重新渲染和setShowReactions的更新时机产生冲突，就会导致setShowReactions基于过期的状态值更新，看起来像是没生效。
• 另外一种可能是：setSelectedMessage触发的重新渲染导致Bubble组件被意外重新挂载（比如props里的key依赖了selectedMessage或currentMessage.text），直接重置了showReactions的本地状态。

解决办法 #

1. 改用函数式更新showReactions
   用函数式更新可以确保基于最新的状态值修改，避开闭包捕获旧值的问题：

   <Bubble
     {...props}
     onLongPress={() => {
       console.warn('pressed');
       // 用函数式更新获取最新状态
       setShowReactions(prev => !prev);
       setSelectedMessage(props.currentMessage.text);
     }}
     renderTime={renderTime}
   />
   

2. 检查Bubble组件的挂载稳定性
   查看props中是否包含key属性，且key的值和currentMessage.text或selectedMessage挂钩。如果是，修改key的取值（比如用消息的唯一ID），避免组件因为状态变化被重新挂载，导致本地状态丢失。

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