MERN栈开发预订应用AuthContext.js触发JSON解析报错求助

错误根因 #

报错Uncaught SyntaxError: Unexpected token u in JSON at position 0的直接原因是JSON.parse()接收到的入参是字符串"undefined"，解析到第一个字符u时不符合JSON语法规则抛出错误，触发场景包括：

• 持久化逻辑曾将undefined写入localStorage，后续读取时拿到非法JSON值
• 本地缓存被手动篡改、浏览器隐私模式限制localStorage读写
• 现有代码将JSON解析逻辑写在模块顶层，无任何容错处理，解析失败直接阻断整个应用启动

修复方案 #

1. 替换原有INITIAL_STATE定义，增加安全读取逻辑 #

不要直接在初始状态里裸调用JSON.parse，封装带异常捕获、格式校验的读取方法，遇到脏数据自动清理：

// 安全读取本地缓存用户信息
const getStoredUser = () => {
  try {
    const storedVal = localStorage.getItem("user")
    // 无缓存直接返回null
    if (!storedVal) return null
    const parsedUser = JSON.parse(storedVal)
    // 校验解析结果格式，非法值直接清理缓存
    if (typeof parsedUser !== "object" || parsedUser === null) {
      localStorage.removeItem("user")
      return null
    }
    return parsedUser
  } catch (err) {
    // 解析失败自动清理脏缓存
    console.error("本地用户缓存解析失败，已自动清理：", err)
    localStorage.removeItem("user")
    return null
  }
}

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

2. 优化useEffect持久化逻辑，避免写入非法值 #

原有逻辑在用户为登出状态时可能写入无效值，增加容错处理，登出时直接清理缓存：

export const AuthContextProvider = ({children}) => {
  const [state, dispatch] = useReducer(AuthReducer, INITIAL_STATE);

  useEffect(() => {
    try {
      if (state.user) {
        localStorage.setItem("user", JSON.stringify(state.user))
      } else {
        localStorage.removeItem("user")
      }
    } catch (err) {
      console.error("用户状态持久化失败：", err)
    }
  }, [state.user]);

  // 其余原有上下文逻辑保持不变
}

临时恢复方法 #

如果修改代码后仍报错，打开浏览器开发者工具-Application面板-Local Storage，找到对应站点下的user键，手动删除该条目后刷新页面即可。

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