React Context存sessionStorage数据正常但导航栏显示空白如何解决

问题原因及排查方案 #

1. 首要原因：Context Provider配置错误 #

你当前从Context解构{ usernameTokens }，说明你预期Context的value是一个带usernameTokens键的对象，但大概率你在根组件包裹Context Provider时，没有正确传递对应结构的value，或者根本没有用Provider包裹导航栏组件，导致拿到的是createContext时的默认空值，所以渲染为空。
正确的Provider配置示例（通常写在App.js/根组件中）：

import { IDContext, UserNameContext, AdminContext } from './context/auth'

function App() {
  // 初始化时主动从sessionStorage读取数据
  const [IDTokens, setIDTokens] = useState(() => {
    const saved = sessionStorage.getItem('id')
    return saved ? JSON.parse(saved) : null
  })
  const [usernameTokens, setUsernameTokens] = useState(() => {
    const saved = sessionStorage.getItem('username')
    // 你当前sessionStorage里存的是""user""，说明存的时候多序列化了一次，这里可以先手动处理，后续修正存储逻辑
    return saved ? JSON.parse(saved) : null
  })
  const [adminTokens, setAdminTokens] = useState(() => {
    const saved = sessionStorage.getItem('isAdmin')
    return saved ? JSON.parse(saved) : false
  })

  return (
    {/* 注意value的结构要和你解构的对应，必须是带对应key的对象 */}
    <IDContext.Provider value={{IDTokens}}>
      <UserNameContext.Provider value={{usernameTokens}}>
        <AdminContext.Provider value={{adminTokens}}>
          {/* 你的路由、导航栏等组件必须放在Provider内部才能拿到Context值 */}
          <Navigation />
          {/* 其他组件 */}
        </AdminContext.Provider>
      </UserNameContext.Provider>
    </IDContext.Provider>
  )
}

2. 次要原因：sessionStorage读写逻辑错误 #

你当前在开发者工具看到的username值是""user""，说明你存储数据的时候重复调用了JSON.stringify，导致字符串被额外套了一层引号，读取时如果只解析一次，拿到的会是带引号的字符串，甚至解析失败返回空。
修正存储逻辑示例（登录成功后执行）：

// 错误写法：两次序列化
sessionStorage.setItem('username', JSON.stringify(JSON.stringify(res.data.username)))
// 正确写法：只序列化一次
sessionStorage.setItem('username', JSON.stringify(res.data.username))
// 普通字符串也可以直接存，不用序列化
sessionStorage.setItem('username', res.data.username)

3. 补充验证方法 #

你可以在Navigation组件开头加一行打印，确认Context拿到的值：

const { usernameTokens } = useUserName();
console.log('拿到的用户名：', usernameTokens) // 看控制台输出是undefined还是空值

如果输出是undefined，100%是Provider配置问题；如果输出是空字符串，就是sessionStorage读取或者数据同步到Context的逻辑有问题。

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