如何 React-Admin 使用 JsonServer 获取我的express API“对‘getList’的响应”必须类似于 { data : [...] }

Question

我使用 jsonServerProvider 但我无法获取我的 Express Api 数据

错误代码

The response to 'getList' must be like { data : [...] }, but the received data is not an array. The dataProvider is probably wrong for 'getList'

My React-Admin ./dataProvider...

import jsonServerProvider from "ra-data-json-server";
import {fetchUtils} from "react-admin"
import axios from 'axios'

const fetchJson = (url, options = {}) => {
  if (!options.headers) {
      options.headers = new Headers({ Accept: 'application/json' });
  }
  // add your own headers here
  options.headers.set('X-Custom-Header', 'foobar');
  options.headers.set('withCredentials', true);
  axios.defaults.withCredentials = true;
  return fetchUtils.fetchJson(url, options);
}

const dataProvider = jsonServerProvider("http://localhost:5000/periodical/api",fetchJson);

export default dataProvider; 

在此处输入图像描述

我的类别列表...

import * as React from "react";
import {
  List,
  Datagrid,
  TextField,
  EditButton,
  Create,
  Edit,
  SimpleForm,
  SelectInput,
  TextInput,
  DeleteButton,
} from "react-admin";


const CategorysTitle = ({ record }) => {
  return <span>Post {record ? `"${record.title}"` : ""}</span>;
};

export const CategorysList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source="id" />
      <TextField source="name" />
      <EditButton />
      <DeleteButton />
    </Datagrid>
  </List>
);

我的 NodeJS Express...

router.route('/').get(async (req, res) => {
    try {
        const data = await CATEGORY.get();
        res.set('Access-Control-Expose-Headers', 'X-Total-Count')
        res.set('X-Total-Count', data)
        console.log(data);
        return res.status(200).json({ data });
    } catch (error) {
        return res.status(500).json({ error });
    }
});

在此处输入图像描述

我的邮差...

在此处输入图像描述

我的网站...

The response to 'getList' must be like { data : [...] }, but the received data is not an array. The dataProvider is probably wrong for 'getList'

在此处输入图片描述

Answer 1

尝试调整您的 API 以在其顶层返回一个数组，如下所示：
[
{
“id”：“C01”，
“姓名”：“姓名01”
},
{
“id”：“C02”，
“姓名”：“姓名02”
}
]

这样您就可以安全地丢弃 ...{ "data": [... 以免 API 返回。

在react-admin文档中看到的“数据”和“总计”标签指的是dataProvider的可视化工作。在 ra-data-json-server 包上查看它： https://github.com/marmelab/react-admin/blob/1b6967f3367b13a6675de7047bd9385dc36a8db5/packages/ra-data-json-server/src/index.js#L113