React项目中prop更新时Navbar不更新但其他同prop组件正常刷新问题

修复方案 #

• 首先修正代码语法错误：你的CRouter组件没有return返回路由JSX元素，直接在函数体写JSX属于无效语法，会导致渲染异常。
• 修正接口调用逻辑：你当前将GetUser直接放在组件顶层执行，会导致每次组件重渲染都重复触发调用，还可能出现闭包陷阱导致状态更新异常，改用useEffect包裹调用，依赖项设为token，仅当token变化时才重新请求用户信息：

import { useEffect } from 'react'

export default function CRouter() {
  const [token, setToken] = useLocalStorage('auth', '')
  const [user, setUser] = useState(false);

  useEffect(() => {
    const GetUser = () => {
      if (token !== "" && !user) {
        axios.post('/auth/getUser', { token }).then(res => {
          if (res.status === 200) {
            setUser(res.data);
          } else {
            setToken('');
            setUser(false);
          }
        })
      }
    }
    GetUser()
  }, [token])

  return (<Router>
      <NavBar user={user}></NavBar>
      <Switch>
        <Route
        exact
        path='/'
        render={(props)=>(
          <Home></Home>
        )}
        ></Route>
        
        <Route
          exact
          path="/forum"
          render={(props) => (
            <Forum user={user}></Forum>
          )}
        ></Route>
      </Switch>
    </Router>)
}

• 检查NavBar组件是否使用了React.memo做渲染优化。如果用了memo，默认只会对props做浅层比较，若你更新user时没有生成新的对象引用，memo会认为prop没有变化跳过渲染；其他没有加memo的组件会随父组件重渲染正常更新，就会出现你遇到的差异表现。修复方式二选一：
  • 去掉NavBar的React.memo包裹
  • 更新user时始终传入新对象：setUser({...res.data})
• 检查NavBar内部是否将传入的user prop存入了内部state但没有监听prop变化。如果NavBar内写了类似const [user, setUser] = useState(props.user)的代码，后续prop更新时内部state不会自动同步，导致视图没有变化。修复方式二选一：
  • 直接使用props.user渲染，不要转存内部state
  • 加useEffect监听prop变化同步内部state：

  useEffect(() => {
    setUser(props.user)
  }, [props.user])
  

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