React报错：更新isOpen状态触发Too many re-renders无限循环

你遇到的报错根源在于Home链接的onClick属性写法错误：直接写onClick={setIsOpen(false)}会导致组件每次渲染时立刻执行状态更新，触发新一轮渲染后又重复执行该操作，最终形成无限循环，触发React的渲染限制机制。

修复方案： #

1. 修正onClick事件绑定：将直接执行的状态更新改为函数形式，确保只有点击时才触发状态变更
2. 优化useLocation的重复调用：利用高阶组件传入的location props，避免组件内重复调用useLocation
3. 简化冗余逻辑：移除高阶组件中无意义的条件判断

修改后的完整代码： #

import React, { useState } from "react";
import { slide as Menu } from "react-burger-menu";
import { Link } from "react-router-dom";
import { useLocation } from "react-router-dom";
import "./SideBar.css";

const withLocation = (SideBar) => (props) => {
    const location = useLocation();
    return <SideBar {...props} location={location} />;
};

const SideBar = ({ location }) => {
    const [isOpen, setIsOpen] = useState(true);

    const homeClass = location.pathname === "/" ? "active-item" : "";
    const aboutClass = location.pathname === "/about" ? "active-item" : "";
    const projectClass = location.pathname === "/projects" ? "active-item" : "";
    const skillsClass = location.pathname === "/skills" ? "active-item" : "";
    const contactClass = location.pathname === "/contact" ? "active-item" : "";
    
    return (
        <Menu isOpen={isOpen}>
            <Link
                to='/'
                onClick={() => setIsOpen(false)}
                className={`menu-item ${homeClass}`}>
                Home
            </Link>
            <Link to='/about' className={`menu-item ${aboutClass}`}>
                About
            </Link>
            <Link to='/projects' className={`menu-item ${projectClass}`}>
                Projects
            </Link>
            <Link to='/skills' className={`menu-item ${skillsClass}`}>
                Skills
            </Link>
            <Link to='/contact' className={`menu-item ${contactClass}`}>
                Contact
            </Link>
        </Menu>
    );
};
export default withLocation(SideBar);

核心修复点是把onClick={setIsOpen(false)}改为onClick={() => setIsOpen(false)}，让状态更新仅在点击事件触发时执行，彻底打破无限渲染循环。

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