React项目Home组件JSON解析及process未定义错误排查求助

错误1：未捕获的语法错误："[object Object]" 不是有效的JSON #

原因 #

• 代码中localStorage.getItem('user')的判断逻辑错误：当user不存在时，返回值是null而非字符串'undefined'，导致错误触发JSON.parse。
• 若存入localStorage时直接存储对象（未用JSON.stringify转换），取出后会得到"[object Object]"字符串，无法被JSON.parse解析。
• localStorage.clear()返回undefined，会导致userInfo变量值异常，引发后续逻辑问题。

解决方法 #

修正localStorage读取逻辑，增加异常捕获：

const storedUser = localStorage.getItem('user');
let userInfo = null;
if (storedUser) {
  try {
    userInfo = JSON.parse(storedUser);
  } catch (err) {
    console.error('解析用户信息失败', err);
    localStorage.removeItem('user'); // 清除无效缓存
  }
} else {
  localStorage.removeItem('user'); // 仅清除user项，避免误删其他缓存
}

同时确保存入localStorage时转为JSON字符串：

localStorage.setItem('user', JSON.stringify(你的用户对象));

错误2：未捕获（在promise中）的语法错误："[object Object]" 不是有效的JSON #

原因 #

与第一个错误同源，都是JSON.parse处理无效JSON字符串导致的异常，区别在于该错误发生在组件初始化后的useEffect执行阶段。

解决方法 #

应用第一个错误的解决方法即可，修复localStorage读取逻辑后，该异常会自动消失。

错误3：未捕获的引用错误：process未定义 #

原因 #

代码中使用了process对象（通常是process.env读取环境变量），但当前项目环境（如Vite、新版Create React App）不再默认全局提供process对象。

解决方法 #

• Create React App v5+：将process.env.XXX替换为import.meta.env.REACT_APP_XXX，环境变量名需以REACT_APP_为前缀。
• Vite：将process.env.XXX替换为import.meta.env.VITE_XXX，环境变量名需以VITE_为前缀，同时确保.env文件配置正确。
• 全局检查代码中process的引用，统一替换为对应环境的变量读取方式。

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