AppBar中authenticatedUser变量无法初始渲染，其他组件正常

问题描述 #

使用Google Firebase和自定义UserAuthContext管理用户认证状态：

• AppBar组件通过useUserAuth()能在控制台正常打印authenticatedUser数据，但初始渲染时无法显示userUsername；
• 仅当打开AppBar上的通知组件，或通过React Router切换页面后，userUsername才会显示；
• 同层级的Home组件却能初始正常显示该变量。

相关代码 #

UserAuthContext Provider代码 #

return (
  <userAuthContext.Provider value={{ user, authenticatedUser, logIn, signUp, logOut }}>
    {children}
  </userAuthContext.Provider>
);

AppBar组件获取数据与渲染代码 #

// 获取数据
const { user, authenticatedUser, logOut } = useUserAuth();
console.log(authenticatedUser);

// 渲染部分
<Typography
  variant="h6"
  noWrap
  component={Link}
  to="/"
  sx={{
    mr: 2,
    display: { xs: "none", md: "flex" },
    fontWeight: 700,
    letterSpacing: ".3rem",
    color: white,
    textDecoration: "none",
  }}
>
  No Username?! Should be HERE:
  {authenticatedUserr &&
    authenticatedUserr.userState &&
    authenticatedUserr.userState.userUsername}
</Typography>;

Home组件渲染代码 #

<Typography
  variant="h6"
  sx={{
    mr: 2,
    display: { xs: "none", md: "flex" },
    fontWeight: 700,
    letterSpacing: ".3rem",
    color: white,
    textDecoration: "none",
  }}
>
  HERE is it!
  {authenticatedUserr &&
    authenticatedUserr.userState &&
    authenticatedUserr.userState.userUsername}
</Typography>

控制台输出的authenticatedUser数据 #

{
  "userState": {
    "userUsername": "depp",
    "userDateOfBirth": {
      "seconds": 1457046000,
      "nanoseconds": 567000000
    },
    "userUid": "fwaFiUdCzeY6YFo1JN25cIaRLPW2",
    "userBabyBadge": true,
    "userMarryBadge": true,
    "userPresentBadge": true,
    "userProfilePicture": "",
    "userVerified": true,
    "userIsSeller": true,
    "userRewardLevel": 10
  }
}

原因分析与解决方案 #

1. 变量名拼写错误（优先排查） #

注意到AppBar组件中渲染时使用的变量是authenticatedUserr（多了一个末尾的r），但通过useUserAuth()获取的变量名是authenticatedUser——这是明显的拼写错误。修正变量名后再测试：

{authenticatedUser &&
  authenticatedUser.userState &&
  authenticatedUser.userState.userUsername}

2. Context状态更新未遵循不可变原则（核心原因） #

如果变量名无误，问题大概率出在UserAuthContext中更新authenticatedUser的方式：

• React通过引用比较判断Context的value是否变化，若直接修改原对象的属性（而非创建新对象），组件无法感知到状态更新，不会触发重渲染；
• 切换路由或打开通知组件时，AppBar因其他操作触发重渲染，此时才会读取到对象内部的最新属性值。

修正方式：在更新authenticatedUser时，始终返回新的对象：

// 错误示例：直接修改原对象
authenticatedUser.userState = newUserData;
setAuthenticatedUser(authenticatedUser);

// 正确示例：创建新对象（不可变更新）
setAuthenticatedUser({
  ...authenticatedUser,
  userState: newUserData
});

// 初始设置用户数据时直接赋值新对象
setAuthenticatedUser(fetchedUserData);

3. 组件被缓存导致未触发重渲染 #

若AppBar组件使用了React.memo进行性能优化，默认的浅比较可能忽略Context内部的属性变化。此时可以：

• 移除React.memo包裹（若对性能影响不大）；
• 为React.memo自定义比较函数，明确监听authenticatedUser的关键属性变化。

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