React跨组件读取localStorage存储的登录状态返回null问题咨询

1. 存取localStorage的key不一致：你在Login.js里存储时用的key是props.loginState.isLoggedIn，但App.js中首次取值用的key是loginState.isLoggedIn，二者不匹配自然读不到值。
2. localStorage仅支持字符串存储：你直接存入布尔值true，实际存储的是字符串"true"，取值时需要做类型转换才能得到布尔值。
3. 状态更新语法错误：setLoginStatus({ props.loginState.isLoggedIn: true }); 是非法的对象键名写法，会导致状态更新失败。
4. 跨组件状态未共享：如果Login组件和Nav、App组件没有共享同一个loginState状态，就算localStorage存对了，组件也拿不到最新的登录状态。

• 统一localStorage存取逻辑，修正类型问题
  登录成功后存储逻辑改为：

  // 存入时转成JSON字符串，保证类型可还原
  localStorage.setItem('isLoggedIn', JSON.stringify(true))
  

  任意组件取值逻辑改为：

  // 取不到值时默认返回false，转成布尔类型
  const isLoggedIn = JSON.parse(localStorage.getItem('isLoggedIn') || 'false')
  

• 修正状态更新写法
  Login.js中的状态更新代码改为：

  setLoginStatus(prevState => ({
    ...prevState,
    isLoggedIn: true
  }))
  

• 初始化状态时优先读取本地存储
  App.js中的状态初始化改为从localStorage取值，保证页面刷新后状态不丢失：

  const initData = {
    // 初始化时先读本地存储
    isLoggedIn: JSON.parse(localStorage.getItem('isLoggedIn') || 'false'),
    user: {},
    setSession: null
  }
  const [loginState, setLoginStatus] = useState(initData)
  

• 实现状态跨组件共享
  你可以选择两种方案实现多组件共享登录状态：
  1. 将loginState和setLoginStatus作为props逐层传递给Login、Nav等需要用到登录状态的组件
  2. 使用React Context封装全局状态，所有子组件可以直接消费登录状态，不需要逐层传参
• 补充登出逻辑
  点击logout按钮时同步清除本地存储并更新状态：

  const handleLogout = () => {
    localStorage.removeItem('isLoggedIn')
    setLoginStatus(prevState => ({
      ...prevState,
      isLoggedIn: false
    }))
  }
  

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