ReactJS中无法获取本地JSON文件数据的解决方法求助

你的代码报错主要是路径错误，以及React项目对静态资源的访问规则限制，下面给你两种可行的解决方式：

方法一：直接导入JSON（推荐，无需HTTP请求） #

React配合webpack支持直接导入JSON文件，不需要用axios发请求，代码更简洁：

import packageJson from './package.json'; // 根据你的项目结构调整相对路径

useEffect(() => {
  console.log(packageJson); // 直接使用导入的JSON数据
}, []);

如果是你自己创建的自定义JSON文件（比如data.json），同样可以用这种方式导入，只要路径正确即可。

方法二：放到public目录后用axios请求 #

如果一定要通过HTTP请求获取，需要把JSON文件移到项目根目录的public文件夹下（这是React默认的静态资源目录），然后修改请求路径：

useEffect(() => {
  axios
    .get('/package.json') // 相对路径，public目录对应根路径
    .then(response => {
      console.log(response.data); // 注意取response.data，这才是实际的JSON内容
    })
    .catch(error => {
      console.error(error); // 打印具体错误信息，方便排查问题
    });
}, []);

排查要点 #

• 路径检查：导入时的相对路径是否正确，public目录下的文件是否存在
• 静态资源规则：只有public目录下的文件才能通过HTTP请求访问，项目根目录的其他文件（比如package.json）默认不会被开发服务器暴露
• 错误详情：不要只打印"error"，用console.error(error)查看具体错误（比如404表示路径不存在）

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