React中setState向数组添加元素失效问题求助

你的代码出现状态回退的核心原因是闭包陷阱：

• useEffect的依赖数组为空，意味着它只会在组件首次渲染时执行一次，里面的MQTT消息回调会捕获当时的stateMeasurements状态（即初始的空数组）。
• 后续组件重新渲染时，这个回调函数并不会更新，依然持有首次渲染时的空数组引用，所以每次调用setStateMeasurements([...stateMeasurements, payload.message])，都是基于空数组添加新元素，导致新状态永远只包含当前这条消息，看起来像是状态回到了初始空数组。

方案1：使用函数式状态更新 #

React的setState支持传入函数，这个函数会接收当前最新的状态作为参数，完全避开闭包带来的旧状态捕获问题：

const [stateMeasurements, setStateMeasurements] = useState([]);

useEffect(()=>{
  // 单独定义消息处理函数，方便后续移除监听
  const handleMessage = (topic, message) => {
    const payload = { topic, message: JSON.parse(message) };
    // 函数式更新：prevState是当前最新的状态数组
    setStateMeasurements(prevState => [...prevState, payload.message]);
  };

  mqttClient.on('message', handleMessage);

  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    mqttClient.off('message', handleMessage);
  };
}, []);

方案2：配合useCallback优化外部函数 #

如果需要将状态更新逻辑抽离到外部函数，需要用useCallback包裹函数，同时依然使用函数式更新：

const [stateMeasurements, setStateMeasurements] = useState([]);

// useCallback确保函数仅在依赖变化时重新创建，这里依赖为空，所以只会创建一次
const funcSetStateMeasurements = useCallback((message) => {
  setStateMeasurements(prevState => [...prevState, message]);
}, []);

useEffect(()=>{
  const handleMessage = (topic, message) => {
    const payload = { topic, message: JSON.parse(message) };
    funcSetStateMeasurements(payload.message);
  };

  mqttClient.on('message', handleMessage);

  return () => {
    mqttClient.off('message', handleMessage);
  };
}, [funcSetStateMeasurements]); // 将函数加入依赖数组

• 无论哪种方案，都必须在useEffect的清理函数中移除MQTT监听，否则组件卸载后监听依然存在，会导致内存泄漏。
• 函数式更新是处理这类依赖前序状态的更新场景的标准方案，能有效避免闭包陷阱。

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