React警告：渲染Nav组件时更新App组件问题排查修复

排查近一小时未定位根源的React警告如下：

Warning: Cannot update a component (App) while rendering a different component (Nav). To locate the bad setState() call inside Nav, follow the stack trace as described in the official React documentation
该警告含义为：渲染<Nav>组件的过程中存在非法更新<App>组件状态的操作，需要定位Nav组件内部错误的setState调用。

核心错误出在Nav.js中Home按钮的事件绑定写法：

• 其余导航按钮的onClick都用箭头函数包裹了setPage调用，只有Home按钮直接写了onClick={setPage('home')}
• 这种写法会导致Nav组件每次渲染时，立刻执行setPage('home')，而不是等用户点击按钮时才触发，属于渲染阶段直接调用父组件状态更新方法，完全触发了React禁止的「渲染一个组件时更新另一个组件」的规则。
• 附带的代码问题：App.js中存在重复的React导入语句，且路由分支没有覆盖paintings、photos、cart几个页面，匹配不到对应page值时组件会返回空。

1. 修复Nav.js的事件绑定错误 #

把Home按钮的onClick改成和其他按钮一致的箭头函数包裹写法，避免渲染阶段直接执行setState，同时修正不合理的绝对路径CSS导入：

import React from 'react'
// 原代码写死了C盘绝对路径，迁移项目会报错，改成相对路径即可
import '../App.css'
const Nav = ({setPage}) => {
    return (
        <>
            <nav className='navBar'>
            {/* 错误写法：onClick={setPage('home')} 会在渲染时直接执行 */}
            <div className="home"><button onClick={() => setPage('home')}>Home</button></div>
                <ul>
                    <li className="navItems"><button onClick={()=>setPage('paintings')}>Painting</button></li>
                    <li className="navItems"><button onClick={()=>setPage('photos')}>Photos</button></li>
                    <li className="navItems"><button onClick={()=>setPage('drawings')}>Drawings</button></li>
                    <li className="navItems" id='cart'><button onClick={()=>setPage('cart')}>Cart</button></li>
                </ul>
            </nav>
        </>
    )
}
export default Nav

2. 修复App.js的附带问题 #

删除重复导入，提取公共Nav组件，补全所有页面分支：

import React, {useState} from 'react'
import './App.css';
import Cart from './pages/cart'
import Home from './pages/home'
import Drawings from './pages/drawings'
import Paintings from './pages/paintings'
import Photos from './pages/photos'
import Nav from './pages/components/nav'

const App = ()=> {
  const [page, setPage] = useState('home');

  return (
    <>
      <Nav setPage={setPage}/>
      {page === 'home' && <Home/>}
      {page === 'drawings' && <Drawings/>}
      {page === 'paintings' && <Paintings/>}
      {page === 'photos' && <Photos/>}
      {page === 'cart' && <Cart/>}
    </>
  )
}

export default App;

优化说明：把Nav组件提取到公共位置，不需要每个路由分支重复编写，用条件渲染匹配对应页面组件即可，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Het Patel