Next.js使用Context API时出现JSON解析意外错误如何解决

你遇到的SyntaxError: Unexpected token o in JSON at position 1错误，核心原因是Cookie存储时传入了非字符串类型值：
Cookie仅支持存储字符串，你在submitHandler中直接将JS对象传给Cookies.set时，浏览器会默认把对象转为[object Object]字符串。后续你在initialState中用JSON.parse解析这个字符串时，第二个字符是o不符合JSON格式要求，直接触发语法错误。

• 第一步：修正Cookie存储逻辑 #

修改shipping.js的submitHandler函数中Cookie存储逻辑，将对象转为JSON字符串后再存储：

// 原来的错误写法
// Cookies.set("shippingAddress", {
//   fullName,
//   address,
//   city,
// });

// 修改为正确写法
Cookies.set("shippingAddress", JSON.stringify({
  fullName,
  address,
  city,
}));

• 第二步：添加解析容错逻辑（推荐） #

修改store.js中的初始状态逻辑，避免之前已存入的无效Cookie持续触发错误：

// 原来的写法
// shippingAddress: Cookies.get("shippingAddress")
//   ? JSON.parse(Cookies.get("shippingAddress"))
//   : {},

// 修改为带容错的写法
shippingAddress: (() => {
  try {
    const savedAddr = Cookies.get("shippingAddress");
    return savedAddr ? JSON.parse(savedAddr) : {};
  } catch (err) {
    // 解析失败时清空无效Cookie，返回默认空对象
    Cookies.remove("shippingAddress");
    return {};
  }
})(),

• 第三步：清理历史无效数据 #

修改代码后，先清除浏览器中已存储的shippingAddress Cookie，避免旧的错误值持续触发报错。

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