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

Question

我在后端使用 django-rest-framework 提供了一个 react-admin 项目。我在 src/dataProvider.js 中写了一个自定义的 dataProvider 参考 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, headers } = await httpClient(url);
            return {
                data: json.data,
                total: headers.get('x-total-count'),
            };
        },

        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}`, {
                method: 'PATCH',
                body: JSON.stringify(params.data),
            }))
        ).then(responses => ({ data: responses.map(({ json }) => json.id) })),

        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 },
            };
        },

        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',
            }))
        ).then(responses => ({ data: responses.map(({ json }) => json.id) })),
    }
}

我的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;

我能够在前端执行 CRUD，因为观察到 optimistic rendering，这让我假设我的 dataProvider 代码在某种程度上是正确的。问题是 create、update 和 delete 的 CRUD 操作没有反映在后端服务器上，即没有 POST、PUT/PATCH 和 DELETE请求被发送到服务器。示例，使用请求正文

的 Postman 向 http://localhost/api/products/ 发送 POST 请求

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

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

Answer 1

我发布的是对我的问题的自我回答。我必须将 options 作为空对象参数传递给 httpClient 方法。

const httpClient = (url, options = {}) => {
    const options = {
        headers: new Headers({ Accept: 'application/json' }),
    };

    return fetchUtils.fetchJson(url, options);
}

我的一个小粗心困扰了我几天

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

react admin create update delete not reflected on backend server

reactjs

django-rest-framework

react-admin