React带状态组件类名设置及无限渲染问题排查

无限渲染的原因 #

你代码里所有onClick事件都写了onClick={toggleMenu()}，这种写法会在组件每次渲染时立即执行toggleMenu函数——函数执行会调用setActiveLinks和setActiveIcons更新状态，状态变化又触发组件重新渲染，重新渲染时再次执行toggleMenu，循环往复就造成了无限渲染错误。

修复步骤 #

1. 修正事件绑定方式：把所有onClick={toggleMenu()}改成onClick={toggleMenu}，传递函数本身而非函数执行的结果：

   <div className={activeIcons ? "lined-icon" : "lined-icon open"} onClick={toggleMenu}>
       <span></span>
       <span></span>
       <span></span>
   </div>
   <div className={activeLinks ? "menu-links" : "menu-links open"}>
       <li><a href="#about" onClick={toggleMenu}>About</a></li>
       <li><a href="#experience" onClick={toggleMenu}>Experience</a></li>
       <li><a href="#projects" onClick={toggleMenu}>Projects</a></li>
       <li><a href="#contact" onClick={toggleMenu}>Contact</a></li>
   </div>
   

2. 优化状态切换逻辑（可选）：因为activeLinks和activeIcons都是布尔值，没必要写冗长的if-else判断，直接对状态取反即可，代码更简洁还能避免依赖当前状态的潜在问题：

   const toggleMenu = () => {
       setActiveLinks(prev => !prev);
       setActiveIcons(prev => !prev);
   }
   

完整修复后的代码 #

const Nav2 = () => {
    const [activeLinks, setActiveLinks] = useState(true);
    const [activeIcons, setActiveIcons] = useState(true);

    const toggleMenu = () => {
        setActiveLinks(prev => !prev);
        setActiveIcons(prev => !prev);
    }

    return (
        <nav id="lined-nav">
            <div className="logo">Umar Manzoor</div>
            <div className="lined-menu">
                <div className={activeIcons ? "lined-icon" : "lined-icon open"} onClick={toggleMenu}>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div className={activeLinks ? "menu-links" : "menu-links open"}>
                    <li><a href="#about" onClick={toggleMenu}>About</a></li>
                    <li><a href="#experience" onClick={toggleMenu}>Experience</a></li>
                    <li><a href="#projects" onClick={toggleMenu}>Projects</a></li>
                    <li><a href="#contact" onClick={toggleMenu}>Contact</a></li>
                </div>
            </div>
        </nav>
    )
}

export default Nav2

内容的提问来源于stack exchange，提问作者Umar Manzoor