Question

我有一个使用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。

Answer 1

我认为良好的做法是像...state那样使用JS Spread syntax。这取决于您的API回答的格式，但我认为使用以下方法实现此目标并不难：

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

Answer 2

使您的初始状态下的对象数组成为

this.state = {
         matrixDictionary: []
      }

当您调用api时，将响应对象放入数组中，以便将其始终存储在另一个索引中，最后创建对象数组。

this.setState({ matrixDictionary: result.data});

它可能会对您有所帮助。

Answer 3

为什么不将对象保存在数组中，所以可以按顺序排列它们：

在构造函数中：

this.state = {
  matrixDictionary: []
}

在您的API调用中：

this.setState(prevState => ({
  values: prevState.matrixDictionary.concat(result.data),
}));

您可以像这样访问它们：

this.state.matrixDictionary[0] // your first api call
this.state.matrixDictionary[1] // your second api call
this.state.matrixDictionary[2] // your third api call

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

3 个答案: