为多个api请求重写Dataprovider会破坏它，现在返回错误“无法读取属性'hasOwnProperty'未定义”

Question

我正在使用react-admin软件包，我注意到我需要重写我的功能数据提供程序，以便在将数据传递给显示它的资源组件之前将两个不同的api请求结果合并到一个数据数组中。在我重写之后我控制台记录返回的数据并且它是正确的，但无论我尝试了什么，我总是在我的console.log数据之前得到“无法读取属性'hasOwnProperty'的未定义”错误，然后我得到几秒钟后出现相同的错误消息，并且不显示任何内容。

在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中记录的数据是正确的格式，以及要显示的数据，但是原始数据提供者显示了项目列表，新数据提供者返回错误消息“无法读取属性'hasOwnProperty'未定义”

Answer 1

你的dataprovider需要回复承诺。根据文件......

/**
 * 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};
            }
        });
};