React项目中从本地JSON文件获取数据遇到问题求助

问题根源 #

你当前的代码错误处理了fetch返回的Response对象：

• JSON.parse(JSON.stringify(res))只是把Response对象序列化成普通对象，并没有读取响应体内的JSON数据
• 直接返回res得到的是未处理的Response实例，不是你需要的JSON内容

正确实现方式 #

fetch返回的Response对象提供了专门的.json()方法用于解析响应体中的JSON数据，修改loadJSON函数即可：

async function loadJSON(url) {
  const res = await fetch(url);
  // 先校验请求是否成功
  if (!res.ok) {
    throw new Error(`请求失败: ${res.status}`);
  }
  return await res.json(); // 使用内置方法解析JSON
}

loadJSON('../file.json')
  .then(data => {
    console.log(data); // 现在会输出正确的JSON数组
  })
  .catch(err => {
    console.error('加载JSON出错:', err);
  });

额外注意事项 #

• 文件路径问题：如果JSON文件放在src文件夹中，在React项目（尤其是Create React App创建的项目）里，更推荐通过ES模块直接导入，简单可靠：

  import jsonData from './file.json'; // 路径根据实际位置调整
  
  // 直接使用jsonData即可，无需fetch
  console.log(jsonData);
  

• 若坚持使用fetch，要确保文件可被正确访问：通常放在public文件夹下的静态资源，可通过根相对路径请求，比如fetch('/file.json')。

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