React解析localStorage报错求助：Unexpected token 'u' JSON错误

错误原因分析 #

你遇到的SyntaxError: Unexpected token 'u'是因为JSON.parse尝试解析了非JSON格式的内容，从错误提示里的"function st..."能看出来，localStorage里的popular键存的不是你预期的食谱数组JSON，而是一段函数相关的字符串——大概率是之前测试时不小心存错了数据，或者localStorage内容被污染了。

分步解决方法 #

1. 先清除错误的localStorage数据 #

打开浏览器控制台（F12），执行以下命令删除错误缓存：

localStorage.removeItem("popular")

刷新页面，让应用重新从API获取正确数据并存入localStorage。

2. 增强代码容错性 #

原代码的问题在于：只判断缓存是否存在，但没验证有效性；没处理JSON解析和API请求的异常。修改后的代码如下：

const Popular = () => {
  const [popular, setPopular] = useState([]);

  useEffect(() => {
    getPopular();
  }, []);

  const getPopular = async () => {
    const check = localStorage.getItem("popular");

    if (check) {
      try {
        const parsedData = JSON.parse(check);
        // 额外验证是否为数组，避免存错数据类型
        if (Array.isArray(parsedData)) {
          setPopular(parsedData);
          return;
        }
      } catch (err) {
        console.error("localStorage数据解析失败:", err);
      }
    }

    // 缓存无效/不存在时发起API请求
    try {
      const url = "https://api.spoonacular.com/recipes/random";
      const apiKey = process.env.REACT_APP_API_KEY;
      const res = await fetch(`${url}?apiKey=${apiKey}&number=9`);
      
      // 检查请求是否成功
      if (!res.ok) {
        throw new Error(`请求失败: ${res.status}`);
      }

      const data = await res.json();
      const recipes = data.recipes || [];
      localStorage.setItem("popular", JSON.stringify(recipes));
      setPopular(recipes);
      console.log("从API获取并缓存数据");
    } catch (apiErr) {
      console.error("API请求失败:", apiErr);
    }
  };

  // 记得补充组件的JSX渲染内容
  return (
    <div>
      {/* 渲染popular数组内容 */}
    </div>
  );
};

3. 关键优化点说明 #

• 给JSON.parse加try/catch，缓存错误时不会导致组件崩溃
• 验证解析后的数据类型，确保符合状态预期
• 处理API请求的HTTP异常，避免静默失败
• 兜底处理data.recipes不存在的情况，防止存undefined到localStorage

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