React Admin dataProvider 在创建期间未发送 id

Question

我有一个自定义的 dataProvider 组件从 ra-data-django-rest-framework 引用，对于 create 中的 create 看起来像这样src/dataProvider.js

import { fetchUtils } from "ra-core";

export default (apiUrl) => {
    const httpClient = (url) => {
        const options = {
            headers: new Headers({ Accept: 'application/json' }),
        };
        return fetchUtils.fetchJson(url, options);
    }

    return {
        .....

        create: async (resource, params) => {
            const json = await httpClient(`${apiUrl}/${resource}`, {
                method: 'POST',
                body: JSON.stringify(params.data),
            });
            return {
                data: { ...json },
            };
        },

        .....

当我提交时，它会在控制台上记录一个 dataProvider 错误The response to 'create' must be like { data: { id: 123, ... } }, but the received data does not have an 'id' key. The dataProvider is probably wrong for 'create' Error: ra.notification.data_provider_error at validateResponseFormat (validateResponseFormat.js:28) at performPessimisticQuery.js:42

我能够在 URL http://localhost:8000/api/products 使用 Postman 成功创建资源，并在后端数据库中使用 POST 请求，请求正文如下所示

{
    "id": 3,
    "name": "Product Name",        
    "category": 4,
    "restaurant": 2
}

我已经尝试在src/products/ProductCreate.js 组件中进行操作

import { Create, SimpleForm, TextInput, NumberInput, ReferenceInput, SelectInput, DateInput } from react-admin";

export const ProductCreate = (props) => {
   const transform = (data) => ({
     ...data,
     id: 4
   })

  return (
    <Create title="Create new product" {...props} transform={transform}>
      <SimpleForm>
        <NumberInput label="Enter Product ID" source="id" />
        <TextInput label="Enter Product Name" source="name" />
        <ReferenceInput label="Product Category" source="category" reference="categories" >
          <SelectInput optionText="name" />
        </ReferenceInput>
        <ReferenceInput label="Product Seller" source="restaurant" reference="restaurants" >
          <SelectInput optionText="name" />
        </ReferenceInput>
        <DateInput source="created_at" options={{ label: "Product creation date" }} />
        <DateInput source="updated_at" options={{ label: "Product updated on" }} />
      </SimpleForm>
    </Create>
  )
}

我的src/App.js

import React from "react";
import { Admin, Resource, Loading } from "react-admin";
import { ProductList, ProductCreate, ProductEdit, ProductShow } from "./components/products";
import dataProvider from "./dataProvider";

const apiUrl = "http://localhost:8000/api";
const dataProvider = dataProvider(apiUrl);

const App = () => {
  if(!dataProvider) {
    return <Loading />
  }

  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="products" list={ProductList} create={ProductCreate} edit={ProductEdit} show={ProductShow} />
    </Admin>
  )
}

export default App;

list 和 show 工作正常。我至少能够乐观地呈现edit 和DELETE 请求。我现在唯一的问题是create 中的POST 请求在dataProvider.js 中定义。谁能帮我解决这个问题？

编辑：我试过console.log(params.data)。似乎发送了create 请求的正确数据格式。我是否需要更改我的httpClient 以便它接受附加参数？示例const httpClient = (url, payload) => {...}。如果是这样，你能指导我怎么做吗？

Answer 1

没关系，我可以通过将 create 功能更改为乐观地渲染它

...
create: async (resource, params) => {
    console.log(params.data);
    const { json } = await httpClient(`${apiUrl}/${resource}`, {
       method: 'POST',
       body: JSON.stringify(params.data),
    });
    return {
       data: { ...params.data, id: json.id },
    };
},
...