React 中 useState 数组状态更新失效的正确解决方案-js教程

在 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);
  };
}, []); // 依赖数组为空，仅挂载/卸载时执行

⚠️ 注意事项：