如何在React Admin中通过POST方法列表数据？ra-jsonapi-client使用咨询

首先可以明确告诉你：用ra-jsonapi-client发起POST请求并获取数据是完全可行的，不需要从零开始编写自己的dataProvider，不过你的当前代码存在几个需要修正的问题，我来一步步帮你理清：

1. 修正DataProvider的传递方式 #

你现在把dataProviders数组传给了<Admin>组件的dataProvider属性，但React Admin的Admin组件只接受单个dataProvider实例，不是数组。正确的写法应该是直接传入jsonapiClient创建的实例：

import React from 'react';
import { Admin, Resource, ListGuesser, CreateGuesser } from 'react-admin';
import jsonapiClient from 'ra-jsonapi-client';

// 直接创建单个dataProvider实例
const dataProvider = jsonapiClient('http://my.api.com:1234');

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="get_info" list={ListGuesser} create={CreateGuesser} />
  </Admin>
);

export default App;

2. 理解React Admin中POST请求的触发逻辑 #

React Admin的<Resource>组件是用来映射你的API资源的，默认情况下：

• ListGuesser会自动发送GET请求获取资源列表
• 如果你添加CreateGuesser（如上面代码所示），它会生成一个创建表单，当你填写表单并提交时，会自动触发POST请求到你的API端点http://my.api.com:1234/get_info

ra-jsonapi-client会自动按照JSON:API规范格式化POST请求的请求体，比如：

{
  "data": {
    "type": "get_info",
    "attributes": {
      // 你表单中填写的字段和值
    }
  }
}

3. 如何自定义请求数据或处理特殊场景 #

如果你的API有一些不符合标准JSON:API规范的地方，或者你需要在发送请求前修改数据，你不需要完全重写dataProvider，可以通过包装jsonapiClient来扩展它：

const customDataProvider = {
  ...dataProvider,
  create: (resource, params) => {
    // 在这里修改params中的数据，比如添加额外字段
    const modifiedParams = {
      ...params,
      data: {
        ...params.data,
        attributes: {
          ...params.data.attributes,
          custom_field: 'custom_value'
        }
      }
    };
    // 调用原create方法发送请求
    return dataProvider.create(resource, modifiedParams);
  }
};

// 然后把customDataProvider传给Admin组件
<Admin dataProvider={customDataProvider}>...</Admin>

总结 #

• 不需要自行编写完整的dataProvider，ra-jsonapi-client完全支持标准JSON:API的POST请求
• 修正你的代码中dataProvider的传递方式，添加Create组件来触发POST请求
• 特殊需求可以通过扩展现有dataProvider来实现，不用从头构建

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