React读取本地JSON文件异常，调用API正常的问题求助

核心原因分析 #

你遇到的差异本质是模块导入机制和浏览器HTTP请求的路径解析逻辑完全不同：

• 调用远程API时，请求的是服务器提供的绝对URL，浏览器能准确定位资源；
• 用axios请求本地JSON时，你写的./data/photos.json是相对于当前浏览器路由的相对路径（比如当前页面路由是/product-listing，实际请求路径会变成/product-listing/data/photos.json），但你的JSON文件在项目src/data目录下，编译后并未被放在这个路径下，导致404错误；
• 而import Photos from '../data/photos.json'是Node.js的模块导入方式，由webpack等构建工具在编译阶段解析，能正确找到文件位置，只是你没用到这份已加载的数据。

解决方案 #

方案一：直接使用模块导入（最简单推荐） #

既然已经通过import导入了JSON文件，直接用导入的数据初始化状态即可，无需axios请求：

useEffect(() => {
  // 直接使用导入的Photos数据，替代axios请求
  setProducts(Photos);
  setFilteredProducts(Photos);
}, []);

这种方式由构建工具处理路径，完全避免浏览器HTTP请求的路径问题。

方案二：将JSON文件移到public目录并修正请求路径 #

1. 把src/data/photos.json移动到项目根目录的public/data文件夹下（没有data文件夹就新建）；
2. 修改axios请求的路径为绝对路径：

const response = await axios.get('/data/photos.json');

public目录下的文件会被直接打包到项目根目录，浏览器通过根路径可以直接访问到。

额外优化（分页逻辑修复） #

你的分页组件中，页码计算用的是products.length，但过滤后的结果应该用filteredProducts.length，否则搜索后分页数量不会更新：

const renderPagination = () => {
  const pageNumbers = [];
  // 替换products.length为filteredProducts.length
  for (let i = 1; i <= Math.ceil(filteredProducts.length / productsPerPage); i++) {
    pageNumbers.push(i);
  }
  // ... 其余代码不变
};

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