React: create simple admin panel and get TypeError: headers is undefined

Question

我是 React 的新手，所以这个问题可能非常基础，但我需要一些帮助。

我写了下面的代码来实现简单的管理面板：

import * as React from "react";

import { fetchUtils, Admin, Resource, ListGuesser } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';


const apiUrl = 'https://my-api';

const authToken =  "zvxvzx";


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

    options.headers.set('Authorization', authToken);
    options.headers.set('Access-Control-Allow-Origin', "*");
    return fetchUtils.fetchJson(url, options).then(({ json }) => ({ data: json }));;
};


const dataProvider = simpleRestProvider(apiUrl, httpClient);

const App = () => (
    <Admin dataProvider={dataProvider} >
   
            <Resource name="requests" list={ListGuesser} />
        </Admin>
    );

export default App;

但是当运行它时，我得到以下错误并且无法在 table 中显示任何数据：类型错误：headers 未定义

如果有人能解释为什么 headers 未定义，我将不胜感激，我只是无法理解。感谢大家阅读！

Answer 1

我的问题解决了。有几点：

1- return fetchUtils.fetchJson(url, options).不需要加上then(({ json }) => ({ data: json })); 也就是说App.js就是：

import * as React from "react";
import jsonServerProvider from 'ra-data-json-server';

import { fetchUtils, Admin, Resource, EditGuesser } from 'react-admin';
import { RequestList } from './requests';
import authProvider from './authProvider';;
    

const apiUrl = 'http://my-app';
const authToken = "sfdasdfa";
    

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
  
    options.headers.set('Authorization', authToken);
    return fetchUtils.fetchJson(url, options)
};


const dataProvider = simpleRestProvider(apiUrl, httpClient);


const App = () => (
    <Admin authProvider={authProvider} dataProvider={dataProvider} customSagas={[ closeSidebarSaga ]}>
   
           
            <Resource name="requests" list={RequestList} />
        </Admin>
    );

export default App;

并且request.js是

import * as React from "react";
import { List, Datagrid, TextField, EmailField, UrlField ,ImageField} from 'react-admin';
   
export const RequestList = props => (
    <List {...props}>      

        <Datagrid  >                
            <TextField source="id" label="id" /> }
           <TextField source="name"  />                    
        </Datagrid>
    </List>
);

2-我的API在JAVA中，当return结果时需要添加如下代码：

MultiValueMap<String, String> headers = new HttpHeaders();
headers.add("Content-Range", "requests 0-rowNUM/rowNUM");
headers.add("Access-Control-Expose-Headers", "Content-Range");
return new ResponseEntity<Object>(Object, headers, HttpStatus.OK);

rowNum == 请求总数。

我希望它足够清楚。

React: create simple admin panel and get TypeError: headers is undefined

React: create simple admin panel and get TypeError: headers is undefined

api

dataprovider

reactjs