使用whatwg-fetch时response.json()丢失嵌套数组问题咨询

遇到这种嵌套数组/对象丢失的情况，别着急，response.json()本身很少会主动破坏合法的JSON结构，咱们从这几个方向排查和解决：

1. 先确认原始响应数据是否完整 #

在调用response.json()之前，先把响应转为文本查看，确认后端返回的原始数据是包含完整嵌套结构的：

fetch('your-api-endpoint')
  .then(response => {
    // 先获取原始文本，排查数据是否真的返回完整
    return response.text().then(text => {
      console.log('原始响应文本:', text); // 在这里检查输出的文本里有没有完整的category_tree嵌套结构
      return JSON.parse(text); // 手动解析，方便看是否有解析报错
    });
  })
  .then(json => {
    console.log('解析后的JSON:', json); // 对比解析前后的结构
    dispatch({ type: RECEIVE_DATA, data: json });
  })
  .catch(err => console.error('解析或请求出错:', err));

如果原始文本里就没有嵌套结构，那问题出在后端返回，得去排查接口；如果原始文本完整但解析后丢失，那大概率是JSON格式有语法错误。

2. 检查后端返回的JSON是否合法 #

你提供的示例数据里就有语法错误："category_id": 2后面缺少逗号，这种不合法的JSON会导致JSON.parse解析异常，可能会静默丢失部分结构，或者直接抛出错误。

要确保后端返回的是严格符合JSON规范的数据：

• 所有键必须用双引号
• 数组/对象最后一项不能有多余的尾逗号（trailing comma）
• 字符串必须用双引号包裹

可以直接在控制台里把原始响应文本复制进去，执行JSON.parse(原始文本)，看是否会抛出语法错误。

3. 确认fetch请求的配置是否正确 #

有时候请求头设置不对，后端可能返回非JSON格式的数据（比如HTML错误页），导致解析后结构异常。确保请求头里明确要求JSON：

fetch('your-api-endpoint', {
  headers: {
    'Accept': 'application/json', // 告诉后端我们要JSON格式的响应
  }
})

4. 排查Redux dispatch前的其他处理逻辑 #

如果前面几步都没问题，那看看在dispatch之前有没有其他中间件、工具函数修改了json数据？比如有没有做了扁平化、过滤之类的操作，不小心把嵌套结构删掉了。在dispatch之前加个console.log(json)，确认数据传到action里是完整的。

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