React-Admin 自定义 api 调用

Question

我正在尝试将 react-admin 用于我的管理仪表板 (React+NodeJS) 我尝试使用的 api 是

http://localhost:8000/api/v1/countries

这是 json 响应：

{
  "error": "false",
  "data": [
    {
      "country_name": "Afghanistan",
      "country_capital": "Kabul",
      "country_area": "652230",
      "country_currency": "Afghani افغانی",
      "continent": "Asia"
    },
    {
      "country_name": "Bhutan",
      "country_capital": "Thimphu",
      "country_area": "38,394",
      "country_currency": "Ngultrum (BTN)",
      "continent": "Asia"
    },
    .........
  ]
}

想法是在 Admin Dashboard 中实现基本的 CRUD 操作

这是我的Dashboard.js组件

import * as React from "react";
import { Admin, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';

import {CountryList} from '../../Components/Country/Country';


const Dashboard = () => (
    <Admin title="My Custom Admin" dataProvider={simpleRestProvider('http://localhost:8000/api/v1/countries')}>
        <Resource name="Countries" list={CountryList} />
    </Admin>
);

export default Dashboard

我的country.js如下

import * as React from "react";
import { List, Datagrid, TextField, EmailField } from 'react-admin';

export const CountryList = props => (
    <List {...props}>
        <Datagrid rowClick="edit">
            <TextField source="country_name" />
            <TextField source="country_name" />
            <TextField source="country_area" />
            <TextField source="country_currency" />
            <TextField source="continent" />
        </Datagrid>
    </List>
);

最后api如下：

app.get("/api/v1/countries", async (request, response) => {
            try{
                const countries = await database.query(
                    `SELECT * FROM COUNTRIES`,
                );
                response.status(200);
                if(countries.length > 0)
                {
                    response.json({
                        error: "false",
                        data: countries
                    });
                }
                else{
                    response.json({
                        error: "true"
                    })
                }   
            }
            catch (e) {
                response.status(500);
                response.json(e);
            }
        });
}

在index.js

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());

这是我遇到的错误：

The Content-Range header is missing in the HTTP Response. The simple REST data provider expects 
responses for lists of resources to contain this header with the total number of results to build the 
pagination. If you are using CORS, did you declare Content-Range in the Access-Control-Expose-Headers 
header?

图片：

那么，我做错了什么？我需要重写我的 api 还是它与数据提供者有关？

Answer 1

服务器响应必须包含header：“Content-Range”表示collection中的项目总数：https://marmelab.com/react-admin/DataProviders.html#usage

Answer 2

在您的后端应用程序中添加 cors 中间件：

app.use(cors({
  exposedHeaders: ['Content-Range']
 }));

在响应中包含 Content-Range header:

const countries = [{id:1,name:"Bangladesh"},{id:2,name:"India"}];
return res
  .status(200)
  .set("Content-Range", countries.length)
  .json(countries);

在你的 React 应用中

    <Admin 
      dataProvider={simpleRestProvider('http://localhost:8000/api/v1')}
    >
      <Resource 
        name="countries" 
        options={{ label: 'Countries' }}
        list={CountryList}
      />
    </Admin>

一切正常

React-Admin 自定义 api 调用

React-Admin custom api call

node.js

reactjs

react-admin