React D3项目中JSON文件加载失败：Promise报错与404错误

你遇到的核心问题是JSON文件路径配置错误导致404，进而触发异步加载流程中的Promise报错。下面是一步步的排查和解决方法：

1. 先理清React的静态资源加载规则 #

在React项目（尤其是Create React App脚手架创建的项目）中，静态资源的存放位置决定了访问路径：

• 如果把JSON文件放在项目根目录的public文件夹下，访问时需要用根路径开头，比如/us-states.json——因为打包后public会作为站点的根目录。
• 如果放在src文件夹内（和App.js同目录或子目录），可以用import或相对路径require加载，比如：

  // 假设json文件和App.js都在src目录下
  import usState from './us-states.json';
  import usCounty from './us-counties.json';
  

注意：如果文件不在src或public中，Webpack不会将其打包到最终产物里，必然会出现404。

2. 修正D3 Queue的异步加载逻辑 #

你当前直接用require加载JSON，但结合D3 Queue的异步流程，更建议把JSON文件的加载也纳入Queue，确保所有资源加载完成后再执行绘制：

drawState(){
  queue
    // 加载你的CSV数据，路径同样要符合资源规则
    .defer(d3.csv, '/path/to/your/data.csv') 
    // 加载GeoJSON文件，路径对应你的文件实际位置
    .defer(d3.json, '/us-states.json') 
    .defer(d3.json, '/us-counties.json')
    .await(function(error, csvData, usStatesJson, usCountiesJson) {
      // 优先处理错误
      if (error) {
        console.error('资源加载失败:', error);
        return;
      }
      // 把TopoJSON转换为D3可识别的GeoJSON格式
      const usStateFeatures = topojson.feature(usStatesJson, usStatesJson.objects.states).features;
      const usCountyFeatures = topojson.feature(usCountiesJson, usCountiesJson.objects.counties).features;
      
      // 后续执行你的D3绘制逻辑，比如用path生成地理路径
      // ...你的绘制代码
    });
}

3. 可选：升级到D3 v5+的Promise写法 #

如果你的D3版本是v5或更高，d3.json已经原生返回Promise，d3-queue的作用就显得冗余了。改用Promise.all更符合现代异步代码风格，也能更清晰地捕获错误：

// 先将drawDoc改为async函数
async drawDoc() {
  try {
    // 并行加载所有需要的资源
    const [csvData, usStatesJson, usCountiesJson] = await Promise.all([
      d3.csv('/path/to/data.csv'),
      d3.json('/us-states.json'),
      d3.json('/us-counties.json')
    ]);
    
    // 转换TopoJSON并执行绘制
    const usStateFeatures = topojson.feature(usStatesJson, usStatesJson.objects.states).features;
    // ...你的绘制代码
  } catch (error) {
    console.error('加载或处理数据出错:', error);
  }
}

4. 额外排查点 #

• 检查JSON文件名的拼写（注意大小写，Linux/macOS系统区分文件名大小写，Windows不区分）。
• 如果是自定义Webpack配置，确认已启用JSON加载（Webpack 4+默认支持，无需额外配置loader）。
• 开发服务器是否正确指向public目录，Create React App默认已配置好，自定义项目需要检查devServer.contentBase参数。

内容的提问来源于stack exchange，提问作者Atul kumar singh