如何 fix:Response 在 react-admin 中未定义

Question

我正在尝试使用 react-admin 从我的 API（express）

中提供用户 CRUD

我遵循了 react-admin 文档中的步骤。创建我自己的 DataProvider。插入管理组件告诉我它已正确设置。添加子资源组件，用户作为资源名称，ListGuesser 作为列表。

在这一点上，我得到一个祝酒词，说未定义的响应和一个控制台错误，说警告：缺少密钥的翻译："response is undefined"

我可以在网络选项卡中看到请求已正确发送并收到包含我预期数据的 200 响应

我无法理解它以及它的来源

这是我的管理组件

import React from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin'
import myDataProvider from './myDataProvider'
import './adminHomepage.css'

let myProvider = myDataProvider('http://localhost:8666')

function AdminHomepage(props) {

  return (
    <Admin dataProvider={myProvider}>
      <Resource name="users" list={ListGuesser} />
    </Admin>

  );
}

export default AdminHomepage;

这是我的数据提供者

import useAuth from "../../hooks/useAuth";
import { stringify } from 'query-string';
import {
    fetchUtils,
    GET_LIST,
    GET_ONE,
    CREATE,
    UPDATE,
    DELETE,
    GET_MANY_REFERENCE
} from 'ra-core';

const { getToken } = useAuth();

export default (apiUrl, httpClient = fetchUtils.fetchJson) => {
  const convertDataRequestToHttp = (type, resource, params) => {
    let url = "";
    const options = {};
    options.headers = new Headers({ Authorization : getToken(), Accept: "application/json" })
    switch (type) {
      case GET_LIST: {
        url = `${apiUrl}/${resource}/`;
        break;
      }
      case GET_ONE: {
        url = `${apiUrl}/${resource}/${params.id}`;
        break;
      }
      case CREATE: {
        url = `${apiUrl}/${resource}/${params.id}`;
        options.method = "POST";
        options.body = JSON.stringify(params.data);
        break;
      }
      case UPDATE: {
        url = `${apiUrl}/${resource}/${params.id}`;
        options.method = "PUT";
        options.body = JSON.stringify(params.data);
        break;
      }
      case DELETE: {
        url = `${apiUrl}/${resource}/${params.id}`;
        options.method = "DEL";
        break;
      }
      default: {
        throw new Error(`Unsupported request type ${type}`);
      }
    }
    return { url, options };
  };

  const convertHttpResponse = (response, type, resource, params) => {
    const { headers, json } = response;
    switch (type) {
      case GET_LIST:
      case GET_MANY_REFERENCE: {
        if (!headers.has("content-range")) {
          throw new Error(
            "Content-Range is missing from header, see react-admin data provider documentation"
          );
        }
        let ret = {
          data: json.users,
          total: parseInt(
            headers
              .get("Content-Range")
              .split(" ")
              .pop()
          )
        };
        console.log("RETURN", ret)
        return ret
      }
      case CREATE: {
        return { data: { ...params.data, id: json.id } };
      }
      default: {
        return { data: json };
      }
    }
  };

  return (type, resource, params) => {
    const { url, options } = convertDataRequestToHttp(type, resource, params);
    return httpClient(url, options).then(response => {
      console.log(response)
      convertHttpResponse(response, type, resource, params);
    });
  };
};

Screenshot of my error

 Warning: Missing translation for key: "response is undefined" 
    in Notification (created by Connect(Notification))
    in Connect(Notification) (created by WithStyles(Connect(Notification)))
    in WithStyles(Connect(Notification)) (created by Context.Consumer)
    in Context.Consumer (created by translate(WithStyles(Connect(Notification))))
    in translate(WithStyles(Connect(Notification))) (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Route)
    in Route (created by withRouter(WithStyles(Layout)))
    in withRouter(WithStyles(Layout)) (created by Connect(withRouter(WithStyles(Layout))))
    in Connect(withRouter(WithStyles(Layout))) (created by LayoutWithTheme)
    in LayoutWithTheme (created by Route)
    in Route (created by CoreAdminRouter)
    in CoreAdminRouter (created by Connect(CoreAdminRouter))
    in Connect(CoreAdminRouter) (created by getContext(Connect(CoreAdminRouter)))
    in getContext(Connect(CoreAdminRouter)) (created by Route)
    in Route (created by CoreAdminBase)
    in CoreAdminBase (created by withContext(CoreAdminBase))
    in withContext(CoreAdminBase) (at adminHomepage.js:11)
    in AdminHomepage (created by Router.Consumer)
    in Router.Consumer (created by Route)
    in Route (at App.js:17)
    in App (at src/index.js:7)

Answer 1

我想你忘记了 return 返回实际结果：

将您的代码更改为：

return (type, resource, params) => {
    const { url, options } = convertDataRequestToHttp(type, resource, params);
    return httpClient(url, options).then(response => {
      console.log(response)
      return convertHttpResponse(response, type, resource, params);
    });
}

这个位可能只是为了填充答案。

JavaScript 中的 Promise 只是一个对象，它会在某个时候被解析为一个值。当您执行 Promise.then 时，您基本上是 return 一个新的 promise，它会在解决时触发一个回调，并且该回调将收到已解决的属性。根据给定的回调结果，您做出的新承诺将具有 return 值。在您的情况下，最终解决的承诺将是 undefined 因为回调中没有 returned

如何 fix:Response 在 react-admin 中未定义

How to fix:Response is undefined in react-admin

node.js

reactjs

react-admin