React+D3中JSON文件properties对象回调后显示undefined问题求助

一、fetch解析JSON时出现SyntaxError错误 #

可能原因 #

1. 响应内容非有效JSON：即便你的JSON文件验证有效，但如果请求路径错误（比如文件未放在public目录、路径拼写失误），服务器会返回404/500的HTML页面，此时将HTML解析为JSON就会触发该错误。
2. 重复读取Response Body：Response对象的body仅能被读取一次，若你在第一个回调中使用了response.text()等读取body的方法，再次调用response.json()时会拿到空内容，导致解析失败。
3. 响应状态异常：网络请求虽返回了Response，但状态码非200（比如301重定向），此时返回的内容可能并非预期的JSON。

解决方法 #

• 校验请求状态：调用response.json()前先确认响应正常：

  fetch('/path/to/your/germany.json')
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      // 处理GeoJSON数据
      data.features.forEach(feature => {
        console.log(feature.properties.name);
      });
    })
    .catch(err => console.error(err));
  

• 确认文件路径：React项目中本地静态文件需放在public目录下，请求路径使用根路径开头（比如/germany.json），避免相对路径引发的404问题。
• 避免重复读取Body：调试时不要在第一个回调中调用response.text()等读取body的方法，直接返回response.json()即可。

二、import JSON后dataset.properties返回undefined #

原因 #

GeoJSON的标准结构是FeatureCollection，其顶层结构包含type、features等字段，顶层的properties是可选字段（通常不存在），各个联邦州的属性信息都存放在features数组中每个Feature对象的properties里。

解决方法 #

直接遍历features数组获取每个州的属性：

import germanyGeoJSON from './germany.json';

// 打印所有联邦州名称
germanyGeoJSON.features.forEach(feature => {
  console.log(feature.properties.name); // 替换为你的属性字段名，比如'NAME_1'等
});

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