How to get latest state value in ReactJS function?

Question

Below function is called from 2-3 places depending on the situation. I am making api call according to the value in my state like this:

myFunction = () => {
    # do something
    const { myVariable } = this.state;
    if (!myVariable.item) {    // myVariable.item is not getting latest variable
        makeAPICall().then(data => {
            myVariable.item = data;
            this.setState({ myVariable });    // setting in state here
        });
    }
}

After one call to the above function, the state myVariable should be set with item, but when it is called again just after that, myVariable.item is undefined.

What can I do to get the latest value from my state to prevent another api call?

Answer 1

Problem: State Mutation

Your variable myVariable is an object reference to the object in this.state.myVariable . You cannot assign to it like myVariable.item = data because this is an illegal mutation of state.

Solution

You need to create a new object, which you can do with object spread syntax.

myFunction = () => {
    const { myVariable } = this.state;
    if (!myVariable.item) {
        makeAPICall().then(data => {
            this.setState({ 
               myVariable: {
                  ...myVariable, // copy all properties
                  item: data, // override item property
               }
            });
        });
    }
}