React出现Uncaught SyntaxError: "undefined" is not valid JSON错误求助

你遇到的Uncaught SyntaxError: "undefined" is not valid JSON错误，根源是JSON.parse尝试解析的内容不符合JSON规范，具体有两个核心原因：

• 当localStorage.getItem("user")返回字符串"undefined"时（比如JSON.stringify(undefined)会得到undefined，存入localStorage后自动转为字符串"undefined"），JSON.parse无法解析该内容。
• 你的注册函数错误处理逻辑有缺陷：fetch链中的.catch((err) => err)会把错误对象直接赋值给res，后续JSON.stringify(err)将错误对象存入localStorage，而错误对象序列化后大概率不是有效JSON，导致解析失败。

1. 修复注册函数的错误处理逻辑 #

重新编写register函数，正确处理请求响应和错误，避免将无效内容存入localStorage：

const register = async (data) => {
    const config = requestConfig("POST", data);

    try {
        const res = await fetch(api + "/users/register", config);
        // 先校验响应状态是否正常
        if (!res.ok) {
            throw new Error(`请求失败，状态码：${res.status}`);
        }
        const resData = await res.json();
        // 确认返回数据是有效对象后再存入
        if (resData && typeof resData === "object") {
            localStorage.setItem("user", JSON.stringify(resData));
        }
    } catch (error) {
        console.error("注册出错：", error);
        throw error; // 抛出错误让上层逻辑处理
    }
};

2. 安全读取localStorage中的用户数据 #

在解析localStorage内容时增加校验，并包裹try/catch避免解析失败导致页面报错：

let user = null;
try {
    const userStr = localStorage.getItem("user");
    // 仅当内容存在且不是"undefined"字符串时才解析
    if (userStr && userStr !== "undefined") {
        user = JSON.parse(userStr);
    }
} catch (err) {
    console.error("解析用户数据失败：", err);
    // 解析失败时清空无效数据
    localStorage.removeItem("user");
}

const initialState = {
    user: user,
    error: false,
    success: false,
    loading: false,
};

3. 额外优化：避免存入无效内容 #

在存入localStorage前，提前校验序列化后的内容是否有效：

// 替换原有的存储逻辑
if (resData) {
    const jsonStr = JSON.stringify(resData);
    if (jsonStr !== "undefined") {
        localStorage.setItem("user", jsonStr);
    }
}

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