React嵌套状态更新异常：setter函数无法更新app.error问题排查

问题 #

我需要动态更新React状态对象app，该状态包含多个属性，其中app.error是嵌套对象。我定义了setAppData setter函数，接收状态的[已有键]:新值对参数，创建新对象并更新状态。

当使用硬编码变量更新app.error或其他app属性时功能正常，但通过该setter函数更新app.error时，状态并未更新。

相关代码 #

const initialAppData: IAppData = {
  error: {} as IFrontEndError,
  interfaceTheme: UI_THEME.LIGHT,
};

function AppProvider(props: any) {
  const [app, setApp] = useState<IAppData>(initialAppData);

  useMemo(() => {
    window.addEventListener("error", (event) => {
      errorHandler({
        colno: event.colno,
        filename: event.filename,
        lineno: event.lineno,
        message: event.message,
      });
    });
  }, []);

  const errorHandler = (event: IFrontEndError) => setAppData({error: { ...event }});

  const setAppData = (newValue: TUpdateAppData) => {
    let key: keyof IAppData;
    let temp = getAppData();

    for (key in newValue) {
      if (
        !Object.prototype.hasOwnProperty.call(app, key) ||
        !Object.prototype.hasOwnProperty.call(newValue, key)
      )
        continue;
      temp = {
        ...temp,
        [key]: newValue[key],
      };
    }
    setApp({ ...temp, error: { ...temp.error } });
  };

  const getAppData = () => ({ ...app });

}

硬编码更新的有效示例 #

const setAppData = () => {
    let temp = getAppData();

    temp.error = {
      colno: 1,
      lineno: 1,
      message: "asd",
      filename: "asd"
    }

    setApp({ ...temp, error: { ...temp.error } });
  };

两种场景对比 #

• 事件触发场景：传入setApp前的temp对象结构正确，但更新后getAppData()返回的error为空对象

  // 传入setApp前的temp
  {
    "error": {
      "colno": 11,
      "filename": "http://127.0.0.1:5173/src/components/Debug.tsx?t=1667134926865",
      "lineno": 29,
      "message": "Error: asd"
    },
    "interfaceTheme": "light-theme"
  }
  // 更新后getAppData()返回
  {
    "error": {},
    "interfaceTheme": "light-theme"
  }
  

• 硬编码场景：传入setApp前的temp与上述结构一致，更新后getAppData()返回的error与预期一致

  // 传入setApp前的temp
  {
    "error": {
      "colno": 1,
      "lineno": 1,
      "message": "asd",
      "filename": "asd"
    },
    "interfaceTheme": "light-theme"
  }
  // 更新后getAppData()返回
  {
    "error": {
      "colno": 1,
      "lineno": 1,
      "message": "asd",
      "filename": "asd"
    },
    "interfaceTheme": "light-theme"
  }
  

问题原因与解决方案 #

核心问题 #

1. 闭包导致的过期状态：useMemo的依赖项为空数组，内部的errorHandler捕获的是组件初始化时的setAppData，而setAppData依赖初始化时的app状态。后续组件重新渲染时，新的setAppData不会被事件监听器捕获，导致更新时使用的是旧的app状态。
2. 状态更新逻辑依赖闭包快照：getAppData()和setAppData中使用的app都是闭包捕获的旧状态，而非当前最新的状态。

修正方案 #

• 用useEffect替代useMemo管理事件监听器，添加正确的依赖项并补充清理函数，避免内存泄漏。
• 使用React的函数式更新获取最新状态，彻底规避闭包带来的过期状态问题。

修正后的代码 #

const initialAppData: IAppData = {
  error: {} as IFrontEndError,
  interfaceTheme: UI_THEME.LIGHT,
};

function AppProvider(props: any) {
  const [app, setApp] = useState<IAppData>(initialAppData);

  useEffect(() => {
    const handleWindowError = (event) => {
      errorHandler({
        colno: event.colno,
        filename: event.filename,
        lineno: event.lineno,
        message: event.message,
      });
    };
    
    window.addEventListener("error", handleWindowError);
    // 清理监听器，防止内存泄漏
    return () => window.removeEventListener("error", handleWindowError);
  }, [errorHandler]); // 依赖errorHandler，确保监听器使用最新的函数

  const errorHandler = (event: IFrontEndError) => setAppData({error: { ...event }});

  const setAppData = (newValue: TUpdateAppData) => {
    // 函数式更新，确保基于最新状态构建新对象
    setApp(prevApp => {
      const updatedState = {...prevApp};
      for (const key in newValue) {
        if (Object.prototype.hasOwnProperty.call(prevApp, key)) {
          updatedState[key] = newValue[key];
        }
      }
      // 重新创建error对象，确保嵌套状态变更能触发重渲染
      updatedState.error = {...updatedState.error};
      return updatedState;
    });
  };

  const getAppData = () => ({ ...app });
}

关键优化点 #

• 用useEffect管理事件监听器，配合清理函数避免组件卸载后仍存在无效监听。
• 函数式更新setApp(prevApp => ...)直接获取最新状态，彻底解决闭包导致的过期状态问题。
• 简化状态更新逻辑，无需依赖getAppData，直接基于最新状态构建更新对象。

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