反应 setState 以更新对象

Question

I have the following code

axios
            .get("some.url")
            .then(res => {
                console.log(...res.data);
                this.setState({
                    isLoaded: true, 
                    assignmentData: {...res.data}
                });
                console.log(this.assignmentData) //this returns undefined
            })

which fetches some data from the back-end and saves it to a state variable. The data sent from the server is in the following format [{id:1, title:"abc"},{id:2,title:"bcd"}] . However, the value of assignmentData is not updated with the setState as the following console.log returns undefined.

How can I update the assignmentData state with the data received from the server?

Answer 1

Firstly: assignmentData will be added to the state this.state.assignmentData

and secondly, this.setState(..) is asynchronous.

If you want to view the data after it is set, you can do something like this:

this.setState({
  isLoaded: true, 
  assignmentData: {...res.data}
}, () => {
  console.log(this.state.assignmentData)
});

Answer 2

You're trying to access a value pertaining to the object that doesn't exist. It exists in state . Therefore you access as follows:

this.state.assignmentData

To access the value in your console log, supply your setState with a callback since it's async:

this.setState({
  isLoaded: true,
  assignmentData: { ...res.data },
}, () => {
  console.log(this.state.assignmentData);
});

Answer 3

log date in asynchronous callback of setState because setState is asynchronous

axios
            .get("some.url")
            .then(res => {
                console.log(...res.data);
                this.setState({
                    isLoaded: true, 
                    assignmentData: {...res.data}
                },() => console.log(this.state.assignmentData)  );
            })

Answer 4

Console in callback of setState because it's asynchronous

    axios
    .get("some.url")
    .then(res => {
        console.log(...res.data);
        this.setState({
            isLoaded: true, 
            assignmentData: {...res.data}
        },()=>console.log(this.state.assignmentData));
    })

or console inside render() you will get updated state.

Answer 5

try this

axios.get("some.url")
     .then(async(res) => {
       console.log(...res.data);
       await this.setState({
         isLoaded: true, 
         assignmentData: {...res.data}
       });
       console.log(this.assignmentData);
});