在 react 函数组件中，使用 useeffect 监听 mqtt 消息并追加数据到数组 state 时，若直接引用闭包中的 state 变量会导致状态“卡在初始值”，必须通过函数式更新（pre => [...pre, newitem]）确保获取最新状态。
React 的 useState hook 在异步或闭包环境中存在经典的“陈旧闭包”（stale closure）问题：当 useEffect 仅在组件挂载时执行一次（依赖数组为 []），其内部捕获的 stateMeasurements 值永远是初始化时的空数组 []，后续所有 setStateMeasurements([...stateMeasurements, payload.message]) 实际都等价于 [...[], newItem] —— 即每次只向空数组追加一项，导致历史数据丢失。
✅ 正确做法是采用函数式更新（functional update）：将 setState 的参数改为接收前一个 state 的函数，React 会保证传入的是当前最新的 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 依赖数组：这会导致每次 state 更新都重新订阅消息，引发重复监听、内存泄漏及状态覆盖。
- 务必实现清理逻辑：MQTT 客户端监听器属于外部副作用，必须在 useEffect 返回的清理函数中调用 off() 或 removeListener()，否则组件卸载后仍可能触发 setState，造成「Cannot update a component while rendering」警告或内存泄漏。
- 增加错误处理：MQTT 消息体不一定是合法 JSON，建议包裹 try...catch 避免解析失败中断流程。
- 若需在其他地方读取最新 stateMeasurements（如导出数据），可配合 useRef 缓存最新值，但状态更新本身仍应严格使用函数式写法。
总结：React 函数组件中，任何在非渲染阶段（如事件回调、定时器、网络响应）中需要基于当前 state 计算新值的场景，都应优先使用 setState(prev => ...) 形式——这是规避闭包陷阱、保障状态一致性的核心实践。
