react-admin: 错误: dataProvider 抛出了一个错误。它应该返回一个被拒绝的 Promise - 容易解决吗？

Question

在 react-admin 3.2.3 编辑表单中，我需要显示来自不同资源的相关记录（作业记录列表）。这种关系有点奇怪，需要字符串解析，所以我不能只使用内置的ReferenceField. 这就是为什么我试图getList使用useGetList钩子调用 dataProvider 的函数。不幸的是，我在表单渲染时遇到错误：

dataProvider 抛出了一个错误。它应该返回一个被拒绝的 Promise

这是我的自定义数据提供程序的 getList 函数：

 getList: (resource, params) => {
        console.log('DataProvider.GetList ');
        console.log(resource);
        console.log(params);
        const { page, perPage } = params.pagination;
        const { field, order } = params.sort;
        const query = {
            ...fetchUtils.flattenObject(params.filter),
            _sort: field,
            _order: order,
            _start: (page - 1) * perPage,
            _end: page * perPage,
        };
        const url = `${getUrl(resource)}?${stringify(query)}`;
        const paging = supportsPaging(resource);

        return httpClient(url).then(
            ({ headers, json }) => {
                var result = [];

                // Implementierung von clientseitigem Paging & Filtering
                var filtered = applyFilter(json, params.filter);
                if (!paging) {
                    filtered=applyPagination(filtered, page, perPage);
                }
                else {
                    result = filtered;
                }

                return {
                    data: result,
                    total: json.length 
                };
            }, ({ reason }) => {

                console.log(reason);
            }).catch((e)=>{
                console.log(e);
            });
    }

我在编辑表单中使用了这个自定义组件。

export const CSEJobList = ({ ...props }) => {
    const form = useForm();
    var formdata = form.getState().values;
    console.log("CSEJobList");
    if (formdata && formdata.status && formdata.status.id >= 2) {
        var data = GetJobData({ 'filter': { type: 'abeitsschein_id_' + formdata.id } });
        return data;
    }
    else {
        return <div>Test</div>
    }
};
CSEJobList.defaultProps = { label: 'Arbeitsschein', addLabel: true };

  const GetJobData = (params) => {
        let parms = { "pagination": { "page": 0, "perPage": 25 }, "sort": { "field": "id", "order": "ASC" }, "filter": {} };
        const { data, loading, error } = useGetList('jobs', parms);
        if (loading) { return <LinearProgress />; }
        if (error) { return <p>ERROR</p>; }
        return <p>{data}</p>;
    };

这只是一个基本的测试。由于调用导致上述错误，因此尚未实现结果数据的正确显示。

我阅读了有关查询 API的文档（https://marmelab.com/react-admin/Actions.html#specialized-hooks），并进行了很多尝试，但由于我对 promise 的理解有限，我失败了。

有没有简单的解决办法？

更新：

我getList像这样更改了 dataProvider函数，按照建议返回被拒绝的承诺：

getList: (resource, params) => {
    console.log('DataProvider.GetList ');
    console.log(resource);
    console.log(params);
    const { page, perPage } = params.pagination;
    const { field, order } = params.sort;
    const query = {
        ...fetchUtils.flattenObject(params.filter),
        _sort: field,
        _order: order,
        _start: (page - 1) * perPage,
        _end: page * perPage,
    };
    const url = `${getUrl(resource)}?${stringify(query)}`;
    const paging = supportsPaging(resource);

    return httpClient(url).then(
        ({ headers, json }) => {
            var result = [];

            // Implementierung von clientseitigem Paging & Filtering
            var filtered = applyFilter(json, params.filter);
            if (!paging) {
                filtered=applyPagination(filtered, page, perPage);
            }
            else {
                result = filtered;
            }

            return {
                data: result,
                total: json.length,  // Erfordert nun keinen speziellen Header mehr, CSE-Connect kompatibel
            };
        }, ({ reason }) => {
            return Promise.reject(reason);
        }).catch((e)=>{
            console.log(e);
            return Promise.reject(e);
        });
},

它没有效果。经过一些调试后，我意识到在 GetJobData函数中

if (loading) { return <LinearProgress />; }

导致错误。在代码的其他部分完全相同，所以嫌疑人不是LinearProgress. 我实际上不知道是什么导致了错误。由于超时，调试很难甚至不可能。

这是完整的堆栈跟踪：

useDataProvider.js:334 Uncaught Error: The dataProvider threw an error. It should return a rejected Promise instead.
    at performQuery (useDataProvider.js:334)
    at Proxy.<anonymous> (useDataProvider.js:163)
    at JSON.stringify.query (useQueryWithStore.js:116)
    at commitHookEffectList (react-dom.development.js:22030)
    at commitPassiveHookEffects (react-dom.development.js:22064)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at flushPassiveEffectsImpl (react-dom.development.js:25392)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at flushPassiveEffects (react-dom.development.js:25361)
    at performSyncWorkOnRoot (react-dom.development.js:24251)
    at react-dom.development.js:12199
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
    at flushSyncCallbackQueue (react-dom.development.js:12182)
    at batchedUpdates$1 (react-dom.development.js:24392)
    at Object.notify (Subscription.js:19)
    at Subscription.notifyNestedSubs (Subscription.js:92)
    at Subscription.handleChangeWrapper (Subscription.js:97)
    at dispatch (redux.js:222)
    at middleware.js:22
    at redux-saga-core.esm.js:1410
    at useDataProvider.js:300

Answer 1

如果发生错误，您的 dataProvider 应返回以下值：

import { HttpError } from 'react-admin'
...
return Promise.reject(new HttpError(message, status, body))