React Hooks应用中NominatePerson组件角色判断异常求助

核心问题分析 #

当前组件始终显示“Dashboard”的原因有两个：

1. Admin路由组未给NominatePerson传递role props #

在App.js的switchAdmin路由配置中，/nominatePerson路由直接使用component={NominatePerson}，没有传递role参数，导致组件内props.role为undefined。

2. NominatePerson组件逻辑判断完全颠倒 #

需求是role为admin时显示Dashboard，否则显示Nomination View，但组件内的判断逻辑与需求完全相反：只要props.role存在就显示Nomination View，不存在才显示Dashboard。

具体修复步骤 #

步骤1：修复Admin路由组的传参问题 #

修改App.js中switchAdmin里的/nominatePerson路由，改为和switchUser一致的传参方式：

// 原代码
<Route path='/nominatePerson' exact component={NominatePerson} />

// 修改后
<Route path='/nominatePerson' exact component={() => <NominatePerson role={role} />} />

步骤2：修正NominatePerson组件的判断逻辑 #

调整组件内的路径跳转和文本显示逻辑，匹配需求：

const NominatePerson = (props) => {
  // 可打印确认props值，方便排查
  console.log("当前role值:", props.role);
  
  return (
    <div className='leftNavItem'>
      <a>
        <Link
          to={props.role === "admin" ? "/dashboard" : "/nominationView"}
          className='nav-link'
        >
          <b>{props.role === "admin" ? "Dashboard" : "Nomination View"}</b>
        </Link>
      </a>
    </div>
  )
}

额外排查建议 #

1. 确认后端返回的access值是否为字符串"admin"（注意大小写），避免类型或字符不匹配导致判断失效。
2. 给role状态设置初始值，比如const [role, setRole] = useState(null);，避免初始渲染时role为undefined引发的路由切换异常。
3. 在fetchData的try块中增加空值判断，避免接口返回数据异常导致报错：

const data = res.data?.[0]?.[0]?.access;
if (data) setRole(data);

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