新用户登录时Dropdown菜单不渲染，刷新后正常的问题排查

DevOps 小满

2026-6-24

问题分析与解决方案

结论：accountId为undefined确实是Dropdown菜单不渲染的直接原因

问题根源拆解

字段拼写错误
App.js中初始化authState时，将account_id误写为accoint_id，后续更新state时也延续了这个错误。这导致Context中根本不存在正确的account_id字段，Home组件从Context获取值时自然得到undefined，传递给ItemList后，accountId === item.account_id永远为false，Dropdown的渲染条件不满足，只能显示"Not your Tournament"。
accessToken获取时机错误
const accessToken = localStorage.getItem("accessToken");写在App组件外部，登录成功后localStorage更新，但该变量不会重新读取最新值。首次登录后的页面渲染中，useEffect仍使用旧的（空）accessToken，导致authState未正确更新，account_id始终为初始的无效值。
路由导航逻辑依赖失效
根路径的导航判断依赖初始化时的accessToken变量，而非实时的authState.status，登录后无法自动触发页面跳转，也间接导致authState未及时更新。

具体修复步骤

1. 修正App.js中的拼写错误

将所有accoint_id替换为account_id：

// 初始化state
const [authState, setAuthState] = useState({username:"", id:0, status:false, account_id:0});

// 更新state时
setAuthState({
  username:response.data.username, 
  id:response.data.id, 
  status:true,
  account_id:response.data.account_id // 修正拼写
});

2. 优化accessToken获取逻辑

将accessToken的读取移到useEffect内部，确保每次执行都获取最新值：

useEffect(() => {
  const currentAccessToken = localStorage.getItem("accessToken");
  console.log("firing api");
  if (!currentAccessToken) {
    setAuthState(prev => ({...prev, status:false}));
  } else{
    axios.get("http://localhost:3001/users/auth", {
      headers: {
        accessToken: currentAccessToken,
      },
    })
    .then((response) => {
      console.log("got a response", response);
      if (response.data.error) {
        setAuthState(prev => ({...prev, status:false}));
      } else {
        setAuthState({
          username:response.data.username, 
          id:response.data.id, 
          status:true,
          account_id:response.data.account_id
        });
      }
    });
  }
}, []);

3. 修正路由导航判断逻辑

用实时的authState.status替代静态的accessToken变量：

<Route path='/' element={!authState.status ? <Navigate to="/LandingPage" /> : <Navigate to="/Home" />} />

4. 登录后直接更新authState（可选优化）

在Login组件登录成功后，直接调用Context的setAuthState更新用户信息，无需依赖App的useEffect：

// Login组件示例
axios.post("http://localhost:3001/users/login", loginData)
.then(response => {
  localStorage.setItem("accessToken", response.data.accessToken);
  // 直接更新authState
  setAuthState({
    username: response.data.username,
    id: response.data.id,
    status: true,
    account_id: response.data.account_id
  });
  navigate("/Home");
})

为什么刷新后正常？

刷新页面时，App组件重新初始化，会重新读取localStorage中的有效accessToken，useEffect执行后正确获取用户信息，authState.account_id得到有效值，传递到ItemList后满足渲染条件，Dropdown正常显示。

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