时间戳

首页 > 解决方案 > React - 从 API 调用创建对象并存储在一个大对象中

javascript - React - 从 API 调用创建对象并存储在一个大对象中

问题描述

我有一个程序使用 Axios 通过 API 调用获取数据。我想将结果作为对象存储在我的this.state.matrixDictionary 变量中。但每次我进行另一个 API 调用时，前一个对象都会被覆盖。我想创造这样的东西

this.setState({
     matrixDictionary: {
       [0]: result,
     }
})

然后下次我进行另一个 api 调用以获得其他结果时，我希望它是这样的：

this.setState({
     matrixDictionary: {
       [0]: result,
       [1]: result,
     }
})

但我不想手动添加 [1]，我希望根据我调用 API 来存储对象的次数来创建它。如果我进行 5 次调用，那么对象现在应该是 [0]、[1]、[2]、[3]、[4]，这样我就可以轻松地跟踪对象并在以后更改它们的值。

如何最好地做到这一点？

fetchDataAPI(APIUrl){


    this.setState({ isLoading: true });
    console.log("Fetching from: " + APIUrl);

    return axios.get(APIUrl,{
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        }
    })
        .then(result => {
            this.setState({isLoading: false});
            console.log(result.data);
            return result.data;
        })
        .catch(error => {
            this.setState({error, isLoading: false })});

}

更新

我使用了 Roman Batsenko 的修复程序，下一个问题是如何更改该对象中的属性并将其放回 setState。

标签： javascriptreactjsapi

解决方案

我想好的做法是使用 JS Spread 语法。...state这取决于您的 API 的答案格式，但我认为通过以下方式实现这一点并不难：

axios.get(APIUrl,{
    /* ... */
})
    .then(result => {
        this.setState({
            isLoading: false,
            matrixDictionary: [...this.state.matrixDictionary, result.data]
        });
    })

推荐阅读