当前位置：首页 > 文章列表 > 文章 > 前端 > AntDesignMenu重复渲染解决方法

AntDesignMenu重复渲染解决方法

2025-08-02 22:36:30 0浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《Ant Design Menu重复渲染问题解决方法》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

解决 Ant Design Menu 组件重复渲染导致 React 状态更新错误

第一段引用上面的摘要：

本文旨在解决在使用 Ant Design 的 Menu 组件时，由于组件重复渲染导致 React 抛出“Can't perform a React state update on an unmounted component”错误的问题。通过分析问题原因，本文提供了一种简单有效的解决方案，即将 Menu 组件放置在路由之外，确保其始终渲染，并避免在其他组件中重复渲染，从而消除该错误。同时，本文也建议在路由根路径上添加一个默认组件，以保证应用的正常显示。

在使用 React 和 Ant Design 开发应用程序时，你可能会遇到一个常见的问题：当在不同的路由组件中多次渲染

组件时，React 会抛出以下警告：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

这个错误通常表明你在组件卸载后尝试更新其状态，这会导致内存泄漏。在 Ant Design 的

组件的上下文中，这通常发生在组件在不同路由之间切换时被多次渲染和卸载。

问题分析

出现此问题的原因在于，当你在不同的路由组件中渲染

组件时，每次切换路由都会导致组件被卸载并重新挂载。如果组件内部存在异步操作或者状态更新，那么在组件卸载后，这些操作可能会尝试更新已经卸载的组件的状态，从而触发上述错误。

解决方案

解决此问题的关键是确保

组件只渲染一次，并且在整个应用程序的生命周期内保持挂载状态。一种简单而有效的方法是将组件放置在路由之外，例如，放置在组件内部，但在组件之前。

以下是一个示例代码：

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Menu } from 'antd';

const ComponentOne = () => {
  return (
    <>
      <div>Component One</div>
    </>
  );
};

const ComponentTwo = () => {
  return (
    <>
      <div>Component Two</div>
    </>
  );
};

const CustomMenu = () => {
    return (
        <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ width: 256 }}
        >
            {/* Menu Items */}
        </Menu>
    )
}

function App() {
  return (
    <BrowserRouter>
      <CustomMenu /> {/* 放置在 Routes 之前，确保只渲染一次 */}
      <Routes>
        <Route path="/component-one" element={<ComponentOne />} />
        <Route path="/component-two" element={<ComponentTwo />} />
        <Route path="/" element={<div>Home</div>} /> {/* 建议添加默认路由 */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

在这个示例中，组件被放置在组件之前，这意味着它会在应用程序启动时渲染一次，并且在路由切换时不会被卸载。

注意事项