如何修复：react-admin 中未定义响应

Question

我正在尝试使用 react-admin 从我的 API (express) 中提供用户 CRUD

我按照 react-admin 文档中的步骤进行操作。 创建我自己的 DataProvider。 插入 Admin 组件告诉我它已正确设置。 添加一个子 Ressource 组件，其中 users 作为资源名称，ListGuesser 作为列表。

此时，我收到一个 toast 说 response in undefined 和一个控制台错误，说 Warning: Missing translation for key: "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 (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 时，您基本上是在返回一个新的承诺，该承诺将在解决时触发回调，并且该回调将接收已解决的属性。您的新承诺将具有基于给定回调结果的返回值。在您的情况下，最终解决的承诺将是 undefined，因为回调中没有返回任何内容