Antd Menu组件重复渲染导致React状态更新警告问题求助

这个警告的核心是组件已被卸载，但仍有异步任务（定时器、网络请求等）在完成后尝试更新组件状态，这会触发无效的状态更新，同时存在潜在内存泄漏风险。结合你的场景（切换导航时卸载CustomMenu组件后触发警告），可以通过以下方案解决：

1. 用挂载标记避免卸载后更新状态 #

在CustomMenu组件内添加一个标记，追踪组件是否处于挂载状态，仅在组件挂载时执行状态更新：

import { useEffect, useState } from 'react';
import { Menu } from 'antd';

const CustomMenu = () => {
  const [selectedKeys, setSelectedKeys] = useState([]);

  useEffect(() => {
    // 标记组件是否挂载
    let isMounted = true;

    // 模拟异步操作（比如接口请求、延迟初始化）
    const initMenu = async () => {
      // 替换为实际的异步逻辑：接口请求/数据处理
      const mockData = await new Promise(resolve => setTimeout(() => resolve(['1']), 1000));
      
      // 仅在组件挂载时更新状态
      if (isMounted) {
        setSelectedKeys(mockData);
      }
    };

    initMenu();

    // 组件卸载时更新标记
    return () => {
      isMounted = false;
    };
  }, []);

  return (
    <Menu selectedKeys={selectedKeys} mode="inline">
      <Menu.Item key="1">菜单1</Menu.Item>
      <Menu.Item key="2">菜单2</Menu.Item>
    </Menu>
  );
};

2. 清理定时器/延时任务 #

如果异步操作是定时器（如setTimeout/setInterval），直接在清理函数中销毁任务：

useEffect(() => {
  const timer = setTimeout(() => {
    setSelectedKeys(['1']);
  }, 1000);

  // 组件卸载时清除定时器
  return () => clearTimeout(timer);
}, []);

3. 用AbortController终止网络请求 #

如果异步操作是网络请求，使用浏览器原生的AbortController直接终止请求，比挂载标记更彻底：

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchMenuData = async () => {
    try {
      const res = await fetch('/api/menu-data', { signal });
      const data = await res.json();
      setSelectedKeys(data.selectedKeys);
    } catch (err) {
      // 忽略请求被中止的错误
      if (err.name !== 'AbortError') {
        console.error('菜单数据加载失败:', err);
      }
    }
  };

  fetchMenuData();

  // 组件卸载时中止请求
  return () => controller.abort();
}, []);

针对你的复现代码的具体修复 #

你的复现代码中，CustomMenu的useEffect内有延迟执行的状态更新，只需添加清理逻辑即可解决：

// 修改CustomMenu中的useEffect
useEffect(() => {
  let isMounted = true;
  const timer = setTimeout(() => {
    if (isMounted) {
      setSelectedKeys(['1']);
    }
  }, 1000);

  return () => {
    isMounted = false;
    clearTimeout(timer);
  };
}, []);

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