显示资源列表时出错:newRecords。map不是函数

When trying to parse a list of customers, the execution stops when fetching the json-response. I checked my API with Postman and all the data is returned as expected. I use the following code for authenticating with JWT

当尝试解析客户列表时，在获取json响应时停止执行。我与邮递员检查了API，所有的数据都按预期返回。我使用以下代码对JWT进行身份验证

export default (type, params) => {
    if (type === AUTH_LOGIN) {
        const { username, password } = params;
        const request = new Request('http://localhost:4000/api/auth/login', {
        method: 'POST',
        body: JSON.stringify({ username, password }),
        headers: new Headers({ 'Content-Type': 'application/json' }),
    });

    return fetch(request)
        .then(response => {
            if (response.status < 200 || response.status >= 300) {
                throw new Error(response.statusText);
            }
            return response.json();
        })
        .then(({ user }) => {
            localStorage.setItem('token', user.jwt);
        });

I use the authentication in the simplerest-client and I get the correct response.

我在simplerest-client中使用身份验证并得到正确的响应。

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    const token = localStorage.getItem('token');
    options.headers.set('Authorization', `Token ${token}`);
    return fetchUtils.fetchJson(url, options);
}
const restClient = simpleRestClient('http://localhost:4000/api', httpClient);

export default (type, resource, params) =>
    new Promise(resolve => setTimeout(() => resolve(restClient(type, resource, params)), 500));

I added the content-range header (content-range →index 0-24/2) and my JSON-Response is:

我增加了含量头(含量→指数0-24/2)和我的json响应:

{
"customers": [
    {
        "phone": "[phone]",
        "last_name": "Test",
        "join_date": "2017-05-17",
        "is_active": false,
        "id": 1,
        "first_name": "Ein",
        "email": "[e-mail]",
        "birth_date": "1990-04-01",
    },
    {
        "phone": "[phone]",
        "last_name": "Fünf",
        "join_date": "2017-01-01",
        "is_active": false,
        "id": 2,
        "first_name": "Testen",
        "email": "[e-mail]",
        "birth_date": "1987-06-02",
    }
]}

I get the following error message:

我得到以下错误信息:

uncaught at handleFetch TypeError: newRecords.map is not a function

Does anybody have an idea, what I am doing wrong?

有人知道我做错了什么吗?

1 个解决方案

#1

I figured this out with a little debugging. The simpleRestClient expects your JSON response to be an array, not an object with a data array inside of it. It's complaining that newRecords.map is not a function because the JS Object type does not have a map function like an Array does.

我通过一些调试算出了这一点。simpleRestClient期望JSON响应是一个数组，而不是包含数据数组的对象。这是抱怨newRecords。映射不是函数，因为JS对象类型不像数组那样具有映射函数。

So you have two options:

所以你有两个选择:

1. Modify your API to return an array at the top level.
2. 修改API以返回顶层的数组。
3. Modify simpleRestClient or just create your own client/data provider for react-admin/admin-on-rest to use. You can then define it such that it handles the records being returned in an array within the response. In my case, there was a property named data that contained the array; in your case, it's customers.
4. 修改simpleRestClient或仅创建您自己的客户端/数据提供程序以供使用。然后可以定义它，以便它处理响应中的数组中返回的记录。在我的例子中，有一个名为data的属性包含数组;就你而言，是顾客。