反应管理员创建更新删除未反映在后端服务器上

如何解决反应管理员创建更新删除未反映在后端服务器上

我有一个使用 django-rest-framework 在后端提供的 react-admin 项目。我在 dataProvider 中编写了一个自定义 src/dataProvider.js，引用 ra-data-django-rest-framework 存储库，如下所示

// in 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);
     }

    const getonejson = (resource,id) => 
        httpClient(`${apiUrl}/${resource}/${id}`)
        .then((response) => response.json
        );

    return {
        getList: async (resource) => {
            const url = `${apiUrl}/${resource}`;
            const { json,headers } = await httpClient(url);
            return {
                data: json.data,total: headers.get('x-total-count'),};
        },getone: async (resource,params) => {
            const data = await getonejson(resource,params.id);
            return {
                data,getMany: (resource,params) => {
            return Promise.all(
                params.ids.map(id => getonejson(resource,id))
                ).then(data => ({ data }));
        },getManyReference: async (resource) => {
            const url = `${apiUrl}/${resource}`;
            const { json,update: async (resource,params) => {
            const { json } = await httpClient(`${apiUrl}/${resource}/${params.id}`,{
                method: 'PATCH',body: JSON.stringify(params.data),});
            return {
                data: json,updateMany: (resource,params) => Promise.all(
            params.ids.map(id => httpClient(`${apiUrl}/${resource}/${id}`,}))
        ).then(responses => ({ data: responses.map(({ json }) => json.id) })),create: async (resource,params) => {
            //console.log(params.data);
            const { json } = await httpClient(`${apiUrl}/${resource}/`,{
                method: 'POST',});
            return {
                data: { ...params.data,id: json.id },delete: (resource,params) => httpClient(`${apiUrl}/${resource}/${params.id}`,{
            method: 'DELETE',}).then(() => ({ data: params.prevIoUsData })),deleteMany: (resource,params) => Promise.all(
            params.ids.map(id => httpClient(`${apiUrl}/${resource}/${id}/`,{
                method: 'DELETE',}
}

我的App.js

// in 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;

当观察到 optimistic rendering 时，我能够在前端执行 CRUD，这让我假设我的 dataProvider 代码有些正确。问题是 create、update 和 delete 的 CRUD 操作没有反映在后端服务器上，即没有 POST、PUT/PATCH 和 DELETE请求被发送到服务器。示例，使用带有请求正文的 Postman 向 POST 发送 http://localhost/api/products/ 请求

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

返回201创建状态并进入数据库。执行来自 react-admin 的相同请求不会在后端服务器中触发 POST 请求。 PUT/PATCH 和 DELETE 请求也是如此。 GET 工作正常。我在这里做错了什么/错过了什么？任何帮助将不胜感激。谢谢你的时间

解决方法

我发帖是对我的问题的自我回答。 我不得不将 <div fxLayout="column" fxLayoutGap="1rem"> <p>Select Payment Method</p> <mat-checkbox>Cash On Delivery</mat-checkbox> <mat-checkbox>Online Payment</mat-checkbox> <mat-checkbox>Wallet</mat-checkbox> </div> 作为空对象参数传递给 options 方法。

httpClient

我的一个小疏忽困扰了我几天