React中利用localStorage实现登录状态持久化及页面展示控制

你的代码存在几个关键问题，导致无法实现预期功能：

1. 每次渲染都会重置localStorage：组件渲染时直接执行localStorage.setItem("isLogin",false)，这会覆盖之前存储的状态，页面刷新后永远读取到false。
2. useState初始值未从localStorage读取：初始状态固定为false，忽略了localStorage中已有的值。
3. setState用法错误：setIsLoging(isLogin = true)是错误的赋值方式，setState应该直接传入新状态值。
4. 函数定义在return之后：login函数定义在组件的return语句之后，导致按钮点击时无法找到该函数，会触发未定义错误。

修复后的代码 #

import { useState } from "react";

function App() {
  // 从localStorage读取初始状态，默认未登录
  const [isLogin, setIsLogin] = useState(() => {
    return localStorage.getItem("isLogin") === "true";
  });

  // 点击登录按钮的处理函数
  const login = () => {
    setIsLogin(true);
    localStorage.setItem("isLogin", "true");
  };

  // 根据登录状态渲染不同内容
  if (isLogin) {
    return <h1>WELCOME USER</h1>;
  } else {
    return <button onClick={login}>Login</button>;
  }
}

export default App;

关键修改说明 #

• 初始化state时读取localStorage：使用useState的函数式初始化，避免每次渲染都重复读取localStorage，同时确保初始状态匹配本地存储的值。
• 移除渲染时的localStorage写入：只在登录按钮点击时更新localStorage，避免覆盖用户之前的操作状态。
• 修正setState调用：直接使用setIsLogin(true)更新状态，符合React的状态更新规范。
• 调整函数位置：将login函数定义在return之前，确保按钮点击时可以正常调用。
• 统一字符串存储：localStorage仅支持字符串存储，存储时直接存入"true"，读取时直接做字符串比较，避免类型转换问题。

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