React中使用localStorage持久化用户名报错‘username is not defined’

代码中的核心问题 #

• username未定义错误：localStorage.setItem(username, JSON.stringify(user))里的username是未声明的变量，本地存储的键名应该用字符串字面量"username"。
• 状态初始化未读取本地存储：初始useState直接设为"john"，页面刷新时不会加载之前存在localStorage里的值，应该优先从本地存储读取。
• 无效的useEffect：第一个useEffect仅执行了解析操作但未赋值给状态，也没有设置依赖数组，会导致组件每次渲染都触发这个无意义的副作用，应当删除。
• 本地存储键名使用错误：localStorage.getItem(user)用user变量作为键名是错误的，应该用固定键名"username"——user是我们要存储的值，不是标识这个值的键。
• 未处理null值解析：当localStorage中没有"username"时，localStorage.getItem("username")会返回null，直接用JSON.parse会报错，需要添加兜底处理。

修正后的代码 #

import React, { useState, useEffect } from "react";

const UserHeading = () => {
  // 初始化时优先从localStorage读取，无值则用默认"john"
  const [user, setUser] = useState(() => {
    const savedUser = localStorage.getItem("username");
    return savedUser ? JSON.parse(savedUser) : "john";
  });

  // user变化时同步更新本地存储
  useEffect(() => {
    localStorage.setItem("username", JSON.stringify(user));
  }, [user]);

  return <h1> Welcome {user} </h1>;
};

export default UserHeading;

修正逻辑说明 #

1. 使用函数式useState初始化状态，避免每次渲染重复调用localStorage.getItem，同时处理了本地存储为空的情况，默认返回"john"。
2. 保留监听user变化的useEffect，将值存储到键为"username"的本地存储中，保证刷新后值能持久保留。
3. 直接在JSX中使用user状态，简化了冗余的变量定义。

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