在 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 形式，这是规避闭包陷阱、保证状态一致性的核心实践。
