React登录功能开发报错：Uncaught SyntaxError: "undefined" is not valid JSON

问题原因 #

错误Uncaught SyntaxError: "undefined" is not valid JSON的核心原因是：

• 当localStorage.getItem('user')未获取到数据时，会返回null，直接将null传入JSON.parse()会触发语法错误——JSON.parse()仅接受有效JSON字符串作为参数，无法解析null或undefined。
• 原代码中JSON.parse(localStorage.getItem('user')) || null的写法逻辑错误，因为JSON.parse报错时，|| null根本不会执行。

解决方案 #

方案1：先判断存在性再解析 #

修改INITIAL_STATE中user的初始化逻辑，先检查本地存储是否有有效字符串，再进行解析：

const INITIAL_STATE = {
  user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null,
  loading: false,
  error: null,
};

方案2：添加异常捕获（更严谨） #

如果担心本地存储中可能存在无效的JSON数据（比如手动修改过），可以用try-catch包裹解析逻辑，同时清理无效数据：

// 封装本地存储读取逻辑
const getUserFromLocalStorage = () => {
  try {
    const userStr = localStorage.getItem('user');
    // 仅当存在有效字符串时才解析
    return userStr ? JSON.parse(userStr) : null;
  } catch (error) {
    console.error('解析用户本地存储数据失败:', error);
    // 清除无效数据，避免后续重复报错
    localStorage.removeItem('user');
    return null;
  }
};

const INITIAL_STATE = {
  user: getUserFromLocalStorage(),
  loading: false,
  error: null,
};

额外说明 #

• 你的useEffect逻辑是正常的：当state.user为null时，JSON.stringify(null)会生成字符串"null"，后续读取时可以被JSON.parse正常解析为null。
• 确保登录成功时存入的action.payload是可序列化的对象（不能包含函数、Symbol等JSON不支持的类型），避免后续存储时出现问题。

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