React-Query数据存入LocalStorage遇JSON格式无效错误求助

错误原因分析 #

1. useEffect无限循环：AuthContext中useEffect的依赖是sessionInfos，每次调用setSessionInfos都会触发该钩子，导致反复读取localStorage并更新状态，最终可能错误地将非JSON格式数据存入localStorage。
2. 无效的localStorage数据：由于循环或之前的错误操作，localStorage中sessionData的值被存成了"[object Object]"（直接存储对象而非JSON字符串的结果），导致JSON.parse时抛出语法错误。

分步解决方案 #

1. 修复useEffect的依赖问题 #

将AuthContext中的useEffect依赖改为空数组，确保只在组件挂载时执行一次初始化逻辑，避免无限循环，同时添加异常处理防止解析失败崩溃：

useEffect(() => {
    const cachedData = localStorage.getItem('sessionData')
    if (cachedData) {
        try {
            const parsedData = JSON.parse(cachedData)
            setSessionInfos(parsedData)
        } catch (err) {
            console.error('解析缓存数据失败:', err)
            localStorage.removeItem('sessionData') // 清除无效数据
            setSessionInfos(INITIAL_SESSION_STATE)
        }
    } else {
        setSessionInfos(INITIAL_SESSION_STATE)
    }
}, []) // 改为空数组，仅组件挂载时执行

2. 清理无效的localStorage数据 #

打开浏览器开发者工具（F12），进入Application -> Local Storage，找到sessionData项并删除，确保后续存储的是正确的JSON字符串。

3. 优化登录组件的存储逻辑 #

确保登录成功时存储的是合法JSON字符串，同时增加异常处理：

onSuccess: (data) => {
    try {
        const jsonData = JSON.stringify(data)
        localStorage.setItem('sessionData', jsonData)
        setSessionInfos(data)
        if (data.isAuth) {
            navigate('/')
        }
    } catch (err) {
        console.error('存储登录数据失败:', err)
    }
},

4. 完善AuthContext的状态处理 #

使用空值合并运算符优化默认值逻辑，避免潜在的空值问题：

const sessionContextValue: ISessionContext = {
    userLogged: sessionInfos?.userLogged ?? { name: '', user: '' },
    isAuth: sessionInfos?.isAuth ?? false,
}

额外优化建议 #

• 可以使用React Query官方持久化插件@tanstack/query-persist-client，无需手动操作localStorage即可实现查询数据的持久化。
• 补充登出逻辑：清除localStorage中的sessionData并重置sessionInfos状态。

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