React使用AG Grid切换页面时报未挂载组件状态更新警告

该警告的触发本质是组件已经从DOM树卸载后，仍有代码尝试调用其setState方法更新状态，在当前场景下，诱因通常分为两类：

• AG Grid自身版本缺陷：v29.3之前的版本存在已知问题，网格卸载时内部的HeaderCellComp列宽同步、排序状态更新、tooltip延迟渲染等异步任务没有被及时终止，组件卸载后任务继续执行就会抛出警告，和业务代码无关。
• 自定义组件逻辑疏漏：自行实现的headerComponent、自定义列渲染组件中，如果存在未清理的定时器、异步请求、事件监听、AG Grid事件订阅，卸载后回调触发时就会执行状态更新，触发警告。

按以下优先级逐一排查处理：

• 优先升级AG Grid版本
  直接升级到v29.3及以上稳定版，或者v30+正式版本，官方在这些迭代中修复了绝大多数内置组件卸载时的异步任务泄漏问题，是成本最低的解决方式。
• 手动销毁网格实例
  在封装的DataGridComponent中，通过useEffect的清理函数主动调用网格销毁方法，确保所有内部任务被终止：

  const [gridApi, setGridApi] = useState(null);
  
  useEffect(() => {
    return () => {
      if (gridApi) {
        gridApi.destroy();
      }
    };
  }, [gridApi]);
  
  const onGridReady = (params) => {
    setGridApi(params.api);
    // 其余原有业务逻辑
  };
  

• 排查自定义组件的清理逻辑
  对所有自定义表头、自定义单元格组件做全量检查：
  1. 所有setTimeout、setInterval、异步请求、window/document级别的全局事件监听、AG Grid事件订阅，必须在组件卸载的清理函数中对应销毁、取消
  2. 异步回调中更新组件状态前，增加挂载状态标记拦截，避免卸载后执行更新：

  useEffect(() => {
    let mounted = true;
    const loadData = async () => {
      const result = await fetchSomeData();
      if (mounted) {
        setColumnData(result);
      }
    };
    loadData();
    return () => {
      mounted = false;
    };
  }, []);
  

• 临时兼容方案（无法升级版本时使用）
  关闭会触发延迟异步任务的配置项，降低警告触发概率：

  const gridOptions = {
    tooltipShowDelay: 0,
    suppressColumnMoveAnimation: true
  };
  

说明：如果完成以上操作后仍有零星警告，且确认业务侧无未清理的异步逻辑，属于AG Grid内部低优先级的已知问题，不会造成实际的内存溢出或业务异常，不影响线上功能使用。

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