React 中使用 useState 更新数组状态时的闭包陷阱与正确解决方案

在 react 函数组件中，通过 useeffect 监听 mqtt 消息并动态向 state 数组追加元素时，若直接引用 state 变量会导致状态“重置”为初始值——这是由闭包捕获过期 state 引起的经典问题，需使用函数式更新避免。

react 的 useState Hook 在每次渲染中都会创建新的 state 值，而 useEffect 的回调函数在组件首次挂载时被定义并闭包捕获了当时的 stateMeasurements 值（即空数组 []）。由于该 effect 未将 stateMeasurements 列为依赖项（且不应添加，否则会引发重复订阅和内存泄漏），后续所有 setStateMeasurements([…stateMeasurements, payload.message]) 实际都基于这个“冻结”的初始值进行展开，导致每次更新都等价于 […[], newItem]，看似新增，实则丢失历史累积。

✅ 正确解法是采用 函数式更新（functional update）：传入一个接收前一状态作为参数的 updater 函数，确保每次更新都基于最新 state 计算：

const [stateMeasurements, setStateMeasurements] = useState([]);  useEffect(() => {   const handleMessage = (topic, message) => {     try {       const parsedMessage = JSON.parse(message.toString());       const payload = { topic, message: parsedMessage };       // ✅ 使用函数式更新，避免闭包中 state 过期       setStateMeasurements(prev => [...prev, payload.message]);     } catch (e) {       console.error("Failed to parse MQTT message:", e);     }   };    mqttClient.on('message', handleMessage);    // ✅ 清理函数：取消订阅，防止内存泄漏和重复触发   return () => {     mqttClient.off('message', handleMessage);   }; }, []); // 依赖数组为空，仅在挂载/卸载时执行

⚠️ 注意事项：

• 不要将 stateMeasurements 加入 useEffect 依赖数组：这会导致每次状态更新都重新订阅，造成多次监听、状态叠加异常甚至客户端崩溃。
• 务必实现清理逻辑（return 函数）：MQTT 客户端事件监听必须手动解绑，否则组件卸载后仍会触发 setState，引发 “Can’t perform a React state update on an unmounted component” 警告。
• 增加错误处理：MQTT 消息体可能非合法 jsON，json.parse() 应包裹在 try/catch 中，保障健壮性。
• 若需在其他地方访问最新 stateMeasurements（如导出数据），可配合 useRef 缓存或使用 usereducer 管理更复杂的状态逻辑。

总结：React 状态更新不是即时赋值，而是异步计划；当更新逻辑依赖前序状态时，必须使用 (prev) => newState 形式，这是规避闭包陷阱、保证状态一致性的核心实践。