如何解决承诺将状态置为反应

Question

I am new to react and javascript and having trouble trying to retrieve a value from a promise so that it can be used for operations. I have did some research and seen a lot of promise tutorials that can return a console log or run a function. But I have yet to see one that can allow me to save to a const/var so I can use for other operations like a setstate.

I have tried a different ways to resolve a promise from an async function so I can do a setstate but they all failed, I have narrowed it down to 3 ways that I have tried which console logs the right information, but when I setstate it fails.

This is a sample of my react component

  state = {
    user: {}
  }



  getCurrentUser = async () => {
        // to save the user details if they are logged in
        const jwt = localStorage.getItem('token')
        return jwtDecode(jwt)
}


  componentDidMount() {

    // method 1
    // returns a promise instead of a value so setstate fails
    let user = this.getCurrentUser()
    console.log(user)
    this.setState({user: user})
    console.log(this.state)


    // method 2
    // trying to resolve a promise and return a value so I save to a variable and then setstate
    user = this.getCurrentUser()
    user = user.then((value) => {
      //console log prints out exactly what I need
      console.log(value)
      return value
    })
    console.log(user)

    this.setState({user: user})
    console.log(this.state)


    // method 3
    // trying to do setstate inside the promise also fails
    user = this.getCurrentUser()
    user.then((value) => {
    this.setState({user: value})
    })

    console.log(this.state)

  }

Thank you for any tips anyone might have on how to resolve this, or if I am misunderstanding concepts on async or promises.

Answer 1

setState is async operation, Where second parameter is callback function which is executed after setState function is performend.

you can do

let user = this.getCurrentUser();
user.then(userData => {
    console.log(userData)
    this.setState({user: userData}, () => {
        console.log(this.state)
    })

})

Answer 2

I don't know exactly what you need, but this.setState takes second argument as a callback, so something like this will display the updated state

this.setState({user: user}, () => console.log(this.state));

Also something like this should work:

user = this.getCurrentUser()
    user = user.then((value) => {
      //console log prints out exactly what I need
      console.log(value)
      return value
    }).then((user) =>
    this.setState({user}, () => console.log(this.state))
);

And you should use await in your async function to wait the data.