React-admin：无法从 Nodejs 导入 Json 数据答案

【问题标题】：React-admin: Unable to import Json data from NodejsReact-admin：无法从 Nodejs 导入 Json 数据
【发布时间】：2020-11-29 07:49:53
【问题描述】：

    {
    "repdata": [
      {
          "id": "1",
          "name": "Nikhil Garakapati",
          "username": "Nikhil",
          "email": "nikhil@gmail.com",
          "representative region": "ANDHRA PRADESH",
          "representative hq": "Chittor",
          "representative area": "Chittor",
          "customer name": "VasaviMeds",
          "customer pincode": "4343434",
          "customer phone": "11111111",
          "phone": "1212121212"
      },
      {
          "id": "2",
          "name": "Nikhil Garakapati",
          "username": "Nikhil",
          "email": "nikhil@gmail.com",
          "representative region": "ANDHRA PRADESH",
          "representative hq": "Chittor",
          "representative area": "Chittor",
          "customer name": "MegaMeds",
          "customer pincode": "4343434",
          "customer phone": "22222222",
          "phone": "1212121212"
    }]}

这是我使用 Nodejs 对 localhost:5000/api/ 的响应示例。我已经在我的 nodejs 文件中硬编码了 json 数据。我正在尝试在我的 react-admin 仪表板中提取此 JSON 数据，但无法执行此操作。这是我的反应代码 sn-p：

import React from 'react';
import { Admin, Resource, ListGuesser, EditGuesser } from 'react-admin';
import { UserList} from './users';
import { UserCreate} from './userCreate';
import jsonServerProvider from 'ra-data-json-server';
//import { CommentList } from './comments';

const dataProvider = jsonServerProvider('localhost:5000/api');

function App() {
  return(
      <Admin title="dashboard" dataProvider={dataProvider}>
        <Resource name="repdata" list={UserList} edit={EditGuesser} create={UserCreate}/>        
      </Admin>
  )
}

export default App;

谁能帮助如何完美连接nodeJs和React-admin？

【问题讨论】：

标签： node.js json reactjs react-admin

【解决方案1】：

好吧，我认为您想制作基于 React SSR 的应用程序，如果是，那么您应该选择带有 react 的 Nextjs，这真的很棒，否则您将来会发现很多问题，为此我觉得这应该 Promises 问题在服务器端做这些步骤。

检查您是否在节点上收到请求。
在您的节点请求中添加承诺。

【讨论】：

【解决方案2】：

在这里，您使用 jsonServerProvider 作为数据提供者。 jsonServerProvider 遵循 JSONPlaceholder 方言，即对于所有 LIST api 调用，数据提供者期望数据在表单中，

[
      {
          "id": "1",
          "name": "Nikhil Garakapati",
          "username": "Nikhil",
          "email": "nikhil@gmail.com",
          "representative region": "ANDHRA PRADESH",
          "representative hq": "Chittor",
          "representative area": "Chittor",
          "customer name": "VasaviMeds",
          "customer pincode": "4343434",
          "customer phone": "11111111",
          "phone": "1212121212"
      },
      {
          "id": "2",
          "name": "Nikhil Garakapati",
          "username": "Nikhil",
          "email": "nikhil@gmail.com",
          "representative region": "ANDHRA PRADESH",
          "representative hq": "Chittor",
          "representative area": "Chittor",
          "customer name": "MegaMeds",
          "customer pincode": "4343434",
          "customer phone": "22222222",
          "phone": "1212121212"
    }
]

此外，标题必须包含一个名为 X-Total-Count 的字段，其值对应于记录的总数，而不应用限制。例如，在您的情况下，假设资源 repdata 有 50 条满足查询条件的记录，但按分页仅返回 10 条记录。然后使用 X-Total-Count 值来确定内容范围。

使用适合您的 API 的自定义数据提供程序总是更好。请参考 react-admin docs 获取信息

【讨论】：