为多个 api 请求重写 Dataprovider 破坏了它，现在 returns 错误 "Cannot read property 'hasOwnProperty' of undefined"

Question

我正在使用 react-admin 包，我注意到我需要重写我的功能数据提供程序以将两个不同的 api 请求结果合并到一个数据数组中，然后再将数据传递给将显示它的资源组件。重写后，我在控制台记录返回的数据并且它是正确的，但无论我尝试了什么，我总是在 console.log 数据之前得到 "Cannot read property 'hasOwnProperty' of undefined" 错误，然后我得到同样的错误几秒钟后，没有显示任何消息。

in dataprovider.js（显示资源组件中的数据）

export default (type, resource, params) => {
    var apiUrl = `https://request1url.com/api`;
    let query = '';
    let url = '';
    const options = {
        headers : new Headers({
            Accept: 'application/json',
        }),
    };
    switch (type) {
        case GET_LIST: {
            if(resource === 'errors'){
                query = '/query/errors';
            }
            if(resource === 'people'){
                query = '/query/users';
            }
            url = `${apiUrl}${query}`;
            break;
        }
        default:
            throw new Error(`Unsupported Data Provider request type ${type}`);
    }

    return fetch(url, options)
        .then(res => {
            return res.json()
        })
        .then(json => {
            var data = [];
            var result = json.data.result;
                for(var i = 0; i < result.length; i++){
                    result[i].id = i
                    data.push(result[i])
                }
            }
            console.log(data)
            switch (type) {
                case GET_LIST:
                return {
                    data: data,
                    total: data.length
                }
                case GET_ONE:
                return {
                    data: data,
                }
                default:
                    return { data: data};
            }
        });
};

在 NEWdataprovider.js（重写）

export default (type, resource, params) => {
    const apiRequests = ['https://request1url.com/api','https://request2url.com/api'];
    let query = '';
    const options = {
        headers : new Headers({
            Accept: 'application/json',
        }),
    };
    switch (type) {
        case GET_LIST: {
            if(resource === 'errors'){
                query = '/query/errors';
            }
            if(resource === 'people'){
                query = '/query/users';
            }
            break;
        }
        default:
            throw new Error(`Unsupported Data Provider request type ${type}`);
    }
    var req1 = fetch(`${apiRequests[0]}${query}`, options).then(function(response){ 
        return response.json()
    });
    var req2 = fetch(`${apiRequests[1]}${query}`, options).then(function(response){
        return response.json()
    });
    Promise.all([req1,req2]).then(function(values){
        var data = [];
        var result1 = values[0].data.result;
        var result2 = values[1].data.result;
        for(var i = 0; i < result1.length; i++){
            result1[i].id = i
            data.push(result1[i])
        }
        for(var j = 0; j < result2.length; j++){
            result2[j].id = j
            data.push(result2[j])
        }
        console.log(data)
            switch (type) {
                case GET_LIST:
                return {
                    data: data,
                    total: data.length
                }
                default:
                    return { data: data};
            }
        });
};

在App.js

<Admin dataProvider={dataProvider}>
  <Resource name="errors" list={errors} />
  <Resource name="people" list={people} />
</Admin>
);

在console.log中记录的数据是正确的格式，并且要显示数据，但是使用原始数据提供者它显示的是项目列表，而新数据提供者returns错误信息"Cannot read property 'hasOwnProperty' of undefined"

Answer 1

您的 dataprovider 需要 return 一个承诺。 根据文档...

/**
 * Query a data provider and return a promise for a response
 *
 * @example
 * dataProvider(GET_ONE, 'posts', { id: 123 })
 *  => Promise.resolve({ data: { id: 123, title: "hello, world" } })
 *
 * @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 action type
 * @returns {Promise} the Promise for a response
 */
const dataProvider = (type, resource, params) => new Promise();

试试 return Promise.all()。

export default (type, resource, params) => {
    const apiRequests = ['https://request1url.com/api','https://request2url.com/api'];
    let query = '';
    const options = {
        headers : new Headers({
            Accept: 'application/json',
        }),
    };
    switch (type) {
        case GET_LIST: {
            if(resource === 'errors'){
                query = '/query/errors';
            }
            if(resource === 'people'){
                query = '/query/users';
            }
            break;
        }
        default:
            throw new Error(`Unsupported Data Provider request type ${type}`);
    }
    var req1 = fetch(`${apiRequests[0]}${query}`, options).then(function(response){ 
        return response.json()
    });
    var req2 = fetch(`${apiRequests[1]}${query}`, options).then(function(response){
        return response.json()
    });
    return Promise.all([req1,req2]).then(function(values){
        var data = [];
        var result1 = values[0].data.result;
        var result2 = values[1].data.result;
        for(var i = 0; i < result1.length; i++){
            result1[i].id = i
            data.push(result1[i])
        }
        for(var j = 0; j < result2.length; j++){
            result2[j].id = j
            data.push(result2[j])
        }
        console.log(data)
            switch (type) {
                case GET_LIST:
                return {
                    data: data,
                    total: data.length
                }
                default:
                    return { data: data};
            }
        });
};