React - Create objects from API call and store in one big object

Question

I have a program that uses Axios to get data with API calls. I want to store the result as a object in my this.state.matrixDictionary variable. but everytime i make another API call the previous object gets overwritten. I want to create something like this

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

Then next time i make another api call to get other result i want it to be like this:

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

But i dont want to add the [1] manually, i want it to be created depending on how many times i make the API call to store the objects. If i make 5 calls then the object should be now [0],[1],[2],[3],[4] so i can easily keep track of the objects and change their values later.

How is this best achieved?

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

}

UPDATE

I used the fix from Roman Batsenko, Next question is how do I then change a property in that object and put it back in setState.

There is no way to achieve this. Either your API has to return the count how many times it get called? or keep track on UI side how many times fetchDataAPI is getting called. — Sagar Kharche, Nov 27 '18 at 09:52
Ok but how can i store several objects in 1 large object then? — gtag, Nov 27 '18 at 09:53
This should help https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react/43041334#43041334 — Shubham Khatri, Nov 27 '18 at 09:54
@gtag, You can use array of objects and use Spread syntax as I've shown in my answer. — Roman Batsenko, Nov 27 '18 at 10:00

score 0 · Accepted Answer · answered Nov 27 '18 at 09:57

0

I guess good practice is to use JS Spread syntax for that like ...state. It depends on the format of answer from your API but I think it would be not so hard to achieve this with:

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

answered Nov 27 '18 at 09:57

Roman Batsenko

81
7

But first time its called this.state.matrixDictionary is null – gtag Nov 27 '18 at 10:05

score 0 · Answer 2 · answered Nov 27 '18 at 09:59

0

make an array of object in your intial state like

this.state = {
         matrixDictionary: []
      }

and when you call your api push your response object in array so that will store always in another index and finally you make array of objects.

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

it may help you.

answered Nov 27 '18 at 09:59

Rahul Dudharejiya

355
3
16

Using this method, the object gets overwritten when making another api call – gtag Nov 27 '18 at 10:15

score 0 · Answer 3 · answered Nov 27 '18 at 10:04

0

Why not save the objects in an array, so you can have them in order:

in the constructor:

this.state = {
  matrixDictionary: []
}

in your API call:

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

You can access them like this:

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

answered Nov 27 '18 at 10:04

c-chavez

7,237
5
35
49

I get an empty list from this method – gtag Nov 27 '18 at 10:16
initialised in constructor as I said, and inside the API call (in the get response, first `.then`) called `setState`, and you get an empty list? – c-chavez Nov 27 '18 at 11:02

React - Create objects from API call and store in one big object

3 Answers3