使用useEffect时React Route首次渲染传入组件的props为undefined怎么办

开发者阿泽

2026-10-5

该问题的本质是loginList状态为异步获取，父组件初始渲染时loginList还未完成数据请求，使用初始空值传递给子组件，等到异步请求结束父组件状态更新，才会将正确的loginList传入子组件触发二次渲染，因此会出现第一次权限判断失败的情况。

可通过以下几种方案解决：

方案1：父组件增加加载态控制子组件渲染
在父组件维护isLoginListLoading状态，发起loginList请求时设为true，请求成功/失败后设为false，路由渲染逻辑修改为：

<Route 
  exact 
  path='/bulletinboard' 
  render={(props) => {
    if (isLoginListLoading) return <div>加载中...</div>
    return <BulletinBoard {...props} loginList={loginList} />
  }} 
/>

该方案可以保证子组件拿到的loginList一定是请求完成后的最终值，不会出现空值传入的情况。

方案2：子组件增加判断守卫，延迟执行权限校验逻辑
不要在子组件首次渲染时直接执行权限判断，而是通过useEffect监听loginList的变化，等loginList有有效值后再执行校验：

import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

const BulletinBoard = ({loginList}) => {
  const navigate = useNavigate()

  useEffect(() => {
    // 只有loginList不为空时才执行校验
    if (!loginList || loginList.length === 0) return
    const isAdmin = loginList.filter(item => item.isAdmin).length > 0
    if (isAdmin) {
      alert('You have access, as the prop has been retrieved.')
    } else {
      alert('You do not have permission')
      navigate('/')
    }
  }, [loginList, navigate])

  // 其余页面渲染逻辑
}