提供给“CoreAdmin”的“object”类型的无效道具“dataProvider”，应为“function”

Question

我刚刚在使用 react-admin 框架并尝试实现自定义数据提供程序。我阅读了有关如何执行此操作的文档，并最终以该示例为起点：https://marmelab.com/react-admin/DataProviders.html#example-implementation

我在控制台中收到以下错误：

警告：道具类型失败：object 类型的无效道具 dataProvider > 提供给 CoreAdmin，预期为 function。 在 CoreAdmin 中（由 withContext(CoreAdmin) 创建） 在 withContext(CoreAdmin) (在 App.js:16) 在应用程序中（在 index.js:7）

这是我的 App.js

import React from 'react';
import { Admin, Resource } from 'react-admin';
import { AssetList } from './assets.js';
import OssApiProvider from './DataProviders/OssApiProvider.js';
import { GET_LIST } from 'react-admin';

const dataProvider = OssApiProvider(
    GET_LIST,
    'asset',
    {
        pagination: {offset: 0, limit: 10},
        sort: {field: 'id', order: 'asc'}
    }
);
const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="asset" list={AssetList} />
    </Admin>
);

export default App;

这是我的数据提供者：DataProviders/OssApiProvider.js

import { stringify } from 'query-string';
import {
    GET_LIST,
    GET_ONE,
    CREATE,
    UPDATE,
    UPDATE_MANY,
    DELETE,
    DELETE_MANY,
    GET_MANY,
    GET_MANY_REFERENCE,
} from 'react-admin';

const apiUrl = '';

/**
 * Maps react-admin queries to OSS REST API
 *
 * @param {string} type Request type, e.g GET_LIST
 * @param {string} resource Resource name, e.g. "posts"
 * @param {Object} payload Request parameters. Depends on the request type
 * @returns {Promise} the Promise for a data response
 */
export default (type, resource, params) => {
    let url = '';
    const options = { 
        headers : new Headers({
            Accept: 'application/json',
        }),
    };
    switch (type) {
        case GET_LIST: {
            const { offset, limit } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                sort: field,
                order: order.toLowerCase(),
                offset: JSON.stringify(offset),
                limit: JSON.stringify(limit),
                filter: JSON.stringify(params.filter),
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        case GET_ONE:
            url = `${apiUrl}/${resource}/${params.id}`;
            break;
        case CREATE:
            url = `${apiUrl}/${resource}`;
            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 UPDATE_MANY:
            const query = {
                filter: JSON.stringify({ id: params.ids }),
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            options.method = 'PATCH';
            options.body = JSON.stringify(params.data);
            break;
        case DELETE:
            url = `${apiUrl}/${resource}/${params.id}`;
            options.method = 'DELETE';
            break;
        case DELETE_MANY:
            // const query = {
            //     filter: JSON.stringify({ id: params.ids }),
            // };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            options.method = 'DELETE';
            break;
        case GET_MANY: {
            const query = {
                filter: JSON.stringify({ id: params.ids }),
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        case GET_MANY_REFERENCE: {
            const { page, perPage } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                sort: JSON.stringify([field, order]),
                range: JSON.stringify([
                    (page - 1) * perPage,
                    page * perPage - 1,
                ]),
                filter: JSON.stringify({
                    ...params.filter,
                    [params.target]: params.id,
                }),
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        default:
            throw new Error(`Unsupported Data Provider request type ${type}`);
    }

    return fetch(url, options)
        .then(res => {
            return res.json();
        })
        .then(json => {
            console.log(json)
            switch (type) {
                case GET_LIST:
                case GET_MANY_REFERENCE:
                    var response = {
                        data: json._embedded[Object.keys(json._embedded)[0]],
                        total: parseInt(json.total, 10),
                    };
                    console.log(response);
                    return response;
                case CREATE:
                    return { data: { ...params.data, id: json.id } };
                default:
                    return { data: json };
            }
        }
    );
};

有人知道在哪里寻找或更好地修复它，因为我的想法已经用完了？

Answer 1

您的OssApiProvider 看起来不错！

问题在于App.js：当您导入OssApiProvider 时，它是您的数据提供者。 您不必调用该函数，您可以按原样传递它。

例如：

const App = () => (
    <Admin dataProvider={OssApiProvider}>
        <Resource name="asset" list={AssetList} />
    </Admin>
);