报错‘Undefined is not a valid JSON’，求解决方案及原理说明

错误核心原因 #

这个错误的本质是：你调用JSON.parse()时传入了undefined值，而JSON规范里不存在undefined这个合法类型——JSON仅支持字符串、数字、布尔值、null、对象、数组这几种类型，undefined是JavaScript独有的值，不在JSON的语法定义内，因此解析时会直接抛出错误。

结合你提供的store.js代码场景，大概率是在读取本地存储（localStorage/sessionStorage）、接口响应数据时，未处理空值就直接调用了JSON.parse()，导致传入了undefined。

分步解决方案 #

1. 解析前加空值校验 #

在调用JSON.parse()前，先判断目标值是否为undefined或null，避免直接解析非法值：

// 示例：读取本地存储的场景
const storedData = localStorage.getItem('your-store-key');
// 同时排除null和undefined，再执行解析
if (storedData != null) {
  const parsedData = JSON.parse(storedData);
  // 后续业务逻辑
} else {
  // 数据为空时初始化默认值
  const parsedData = { /* 自定义默认结构 */ };
}

2. 规范数据写入环节 #

如果是你主动写入的数据（比如往localStorage存值），禁止直接写入undefined：

• 错误写法：localStorage.setItem('key', undefined)——这会把undefined转成字符串"undefined"，后续解析同样报错
• 正确写法：用JSON.stringify()转成合法JSON字符串，空值用null代替：

const dataToStore = someData || null; // 把undefined替换为null
localStorage.setItem('key', JSON.stringify(dataToStore));

3. 接口响应数据校验 #

如果是接口返回的数据导致错误：

• 先打印响应体确认内容：console.log(response.data)，看是否返回了undefined或非JSON格式的内容
• 配合接口状态码判断：比如只有当状态码为200且响应体不为空时，再执行解析逻辑

原理拆解 #

JSON的语法遵循ECMA-404规范，其合法值的定义非常严格：

1. 原始值：必须是双引号包裹的字符串、数字、true/false、null
2. 复合值：只能是键值对对象（键必须是双引号字符串）或数组

而undefined是JavaScript的语言特性，不属于JSON的合法值范畴。另外，即使你把undefined转成字符串"undefined"，它也不是合法JSON——合法的JSON字符串需要被双引号包裹（比如"\"undefined\""才是可解析的JSON字符串）。

同类问题排查思路 #

1. 定位解析触发点：从报错栈信息里找到调用JSON.parse()的代码行，明确是哪段逻辑出问题
2. 打印待解析值：在JSON.parse()前加console.log()输出目标变量，确认是否为undefined或非法JSON字符串
3. 追踪数据流转：从数据的生成（接口返回/本地存储写入）到读取解析的全流程，检查哪一步把数据变成了undefined或非合法JSON

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