React Admin getList返回格式不符报错排查（Django DRF后端）

报错由两个层级的问题共同导致：

1. 基础请求逻辑失效：你在自定义fetchJson中打印fetchUtils.fetchJson得到undefined，说明未正确导入React Admin内置的fetchUtils工具模块，自定义fetch函数执行时会直接抛出引用错误，dataProvider根本无法拿到后端返回的合法响应数据，这是触发报错的直接原因。
2. 响应格式适配不匹配：ra-data-django-rest-framework默认适配Django REST Framework原生分页响应结构，即返回格式为{count: 总条数, next: 下一页链接, previous: 上一页链接, results: 数据数组}，你当前后端直接返回{data: 数组}的结构，就算请求逻辑正常，提供器也会因解析不到对应字段判定响应格式非法。

按顺序操作即可解决问题：

• 首先修复导入问题
  在编写dataProvider逻辑的文件顶部，补充正确的导入语句，确保fetchUtils能被正常引用：

import { fetchUtils } from 'react-admin';
import drfProvider from 'ra-data-django-rest-framework';

添加后重新在fetchJson内打印fetchUtils.fetchJson，确认输出为函数类型而非undefined，保证请求逻辑可以正常发起、拿到后端响应。

• 其次对齐响应格式，两种方案任选其一即可
  • 方案1（后端调整，更符合插件设计预期）：调整DRF接口的分页返回为原生分页结构，不要用自定义的data字段包装数组，参考返回结构如下：

  {
      "count": 6,
      "next": null,
      "previous": null,
      "results": [
          {
              "id": 6,
              "product_title": "Foam chair",
              "product_description": "Fantastic Foam chair"
          }
          // 其余列表项
      ]
  }
  

  同时给列表接口添加Content-Range响应头，格式为资源名 起始索引-结束索引/总条数，例如此处产品列表的响应头为Content-Range: products 0-5/6，即可同时解决分页总数识别问题。
  • 方案2（前端适配，无需修改后端）：对默认生成的drfProvider做一层包装，重写getList方法的解析逻辑，适配你当前后端的返回结构，示例代码如下：

  const baseProvider = drfProvider('http://127.0.0.1:8000/api', fetchJson);
  const dataProvider = {
      ...baseProvider,
      getList: async (resource, params) => {
          const response = await fetchJson(`http://127.0.0.1:8000/api/${resource}`);
          return {
              data: response.json.data,
              total: response.json.data.length // 如果后端单独返回总数字段，替换为对应字段取值即可
          }
      }
  }
  

• 最后验证效果
  修改完成后清空浏览器缓存刷新页面，查看控制台是否还有格式报错，同时检查Network面板中列表接口请求是否正常返回、数据是否正确渲染即可。

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