React项目中为何已移除的Ant Design Menu组件项仍被渲染？

这个问题的核心在于你对React的渲染机制和状态管理逻辑理解出现了偏差，我来一步步拆解原因并给出解决办法：

为什么修改了数组但页面没更新？ #

1. items不是React状态：你把items定义成了组件内的普通常量，React只会跟踪状态（state</think_never_used_51bce0c785ca2f68081bfa7d91973934>
   ）或props的变化来触发重新渲染。哪怕你用splice修改了数组内容，React也不会意识到这个变化需要更新UI。
2. 每次渲染都会重置items：组件每次渲染时，const items = [...]这行代码都会重新执行，创建一个包含四个菜单项的全新数组。哪怕你在useEffect里修改了上一次渲染的数组，下一次渲染又会回到原始状态，相当于你的修改直接被覆盖了。

正确的解决方法 #

推荐用声明式的方式根据user状态动态生成菜单数组，这更符合React的核心思想：UI是状态的映射，我们只需要根据当前状态描述应该显示什么UI即可，不需要命令式地修改原数组。

方法1：动态生成items（最推荐） #

直接在渲染时根据user的存在与否生成对应的菜单项，完全不需要修改原数组：

// 先定义基础的通用菜单项
const baseItems = [
  {
    label: <Link to='/'>Home </Link>,
    key: 'home',
    icon: <AppstoreOutlined />,
  },
  {
    label: 'Username',
    key: 'SubMenu',
    icon: <SettingOutlined />,
    children: [
      { label: 'Option 1', key: 'setting:1', },
      { label: 'Option 2', key: 'setting:2', },
      // 注意：item不是合法HTML标签，改成span或者其他标签
      { label: <span onClick={logout}>Logout</span>, key: 'setting:3', icon: <LogoutOutlined /> },
    ],
  },
];

// 根据user状态拼接完整菜单数组
const items = user 
  ? baseItems 
  : [
      ...baseItems,
      {
        label: <Link to='/register'>Register</Link>,
        key: 'register',
        icon: <UserAddOutlined />,
        style: { marginLeft: 1030}, // 后续建议用flex布局替代硬编码边距
      },
      {
        label: <Link to='/login'>Login</Link>,
        key: 'login',
        icon: <UserOutlined />,
        style: { marginLeft: 'auto'},
      },
    ];

// 不需要useEffect修改数组了，直接渲染即可
return <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal" items={items} />;

这样每次组件渲染时，都会根据当前的user状态生成正确的菜单数组，React会自动对比新旧数组的差异，更新页面UI。

方法2：用useState管理items（适合复杂场景） #

如果你的菜单逻辑非常复杂，需要保存一些动态修改的状态，可以把items声明为React状态，通过setItems来更新：

const [items, setItems] = useState([
  {
    label: <Link to='/'>Home </Link>,
    key: 'home',
    icon: <AppstoreOutlined />,
  },
  {
    label: 'Username',
    key: 'SubMenu',
    icon: <SettingOutlined />,
    children: [
      { label: 'Option 1', key: 'setting:1', },
      { label: 'Option 2', key: 'setting:2', },
      { label: <span onClick={logout}>Logout</span>, key: 'setting:3', icon: <LogoutOutlined /> },
    ],
  },
  {
    label: <Link to='/register'>Register</Link>,
    key: 'register',
    icon: <UserAddOutlined />,
    style: { marginLeft: 1030},
  },
  {
    label: <Link to='/login'>Login</Link>,
    key: 'login',
    icon: <UserOutlined />,
    style: { marginLeft: 'auto'},
  },
]);

useEffect(() => {
  if (user) {
    // 不要直接修改原数组，通过创建新数组来更新状态
    setItems(prevItems => prevItems.slice(0, 2));
  } else {
    // 用户退出时恢复完整菜单
    setItems([
      // 这里复制原始的四个菜单项
      {
        label: <Link to='/'>Home </Link>,
        key: 'home',
        icon: <AppstoreOutlined />,
      },
      {
        label: 'Username',
        key: 'SubMenu',
        icon: <SettingOutlined />,
        children: [
          { label: 'Option 1', key: 'setting:1', },
          { label: 'Option 2', key: 'setting:2', },
          { label: <span onClick={logout}>Logout</span>, key: 'setting:3', icon: <LogoutOutlined /> },
        ],
      },
      {
        label: <Link to='/register'>Register</Link>,
        key: 'register',
        icon: <UserAddOutlined />,
        style: { marginLeft: 1030},
      },
      {
        label: <Link to='/login'>Login</Link>,
        key: 'login',
        icon: <UserOutlined />,
        style: { marginLeft: 'auto'},
      },
    ]);
  }
}, [user]);

return <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal" items={items} />;

注意这里更新状态时，我们用了prevItems来创建新数组，而不是直接修改原数组——React状态更新必须是不可变的，直接修改原数组不会触发重新渲染。

额外的小建议 #

• 你代码里的<item onClick={logout}>Logout</item>是错误的，item不是合法的HTML标签，改成<span>或者<button>更合适。
• 硬编码marginLeft: 1030的写法很不灵活，建议用CSS的flex布局来实现菜单的右对齐，比如给Menu容器添加justify-content: space-between样式，或者把需要右对齐的菜单项放到一个容器里，用margin-left: auto统一控制。

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