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

Posted 2023-03-07

【中文标题】React-admin：无法从 Nodejs 导入 Json 数据

【英文标题】：React-admin: Unable to import Json data from Nodejs

【发布时间】：2020-11-29 07:49:53

【问题描述】：

    
    "repdata": [
      
          "id": "1",
          "name": "Nikhil Garakapati",
          "username": "Nikhil",
          "email": "[e-mail]",
          "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": "[e-mail]",
          "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？

【参考方案1】：

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

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

【参考方案2】：

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

[
      
          "id": "1",
          "name": "Nikhil Garakapati",
          "username": "Nikhil",
          "email": "[e-mail]",
          "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": "[e-mail]",
          "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 获取信息