反应管理员创建更新删除未反映在后端服务器上 [英] react admin create update delete not reflected on backend server

问题描述

我有一个使用 django-rest-framework 在后端提供的 react-admin 项目.我在 src/dataProvider.js 中编写了一个自定义 dataProvider 引用 ra-data-django-rest-framework repo 看起来像这样

I have a react-admin project served on the backend with django-rest-framework. I wrote a custom dataProvider in src/dataProvider.js referencing from ra-data-django-rest-framework repo which looks like this

// 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 作为 观察到乐观渲染，这让我假设我的 dataProvider 代码有些正确.问题是 create, update & 的 CRUD 操作delete 不会反映在后端服务器上，即没有 POST、PUT/PATCH 和 DELETE 请求被发送到后端服务器服务器.示例，使用带有请求正文的 Postman 向 http://localhost/api/products/ 发送 POST 请求

I am able to perform CRUD on the frontend side as optimistic rendering is observed which makes me assume my dataProvider code is somewhat correct. The problem is the CRUD operation for create, update & delete is not reflected on the backend server i.e no POST, PUT/PATCH and DELETE requests are sent to the server. Example, sending a POST request to http://localhost/api/products/ using Postman with request body

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

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

return 201 created status and enters in the database. Performing the same request from react-admin doesn't fire the POST request in the backend server. Same goes for PUT/PATCH and DELETE requests. GET works fine though. What am I doing wrong/missing here? Any help would be greatly appreciated. Thank you for your time

推荐答案

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

I am posting as a self answer to my question. I had to pass options as an empty object parameter to the httpClient method.

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

    return fetchUtils.fetchJson(url, options);
}

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

It was a minor carelessness on my part that troubled me for a few days

这篇关于反应管理员创建更新删除未反映在后端服务器上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！