如何解決承諾將狀態置為反應

Question

我是剛接觸React和javascript的人，在嘗試從Promise檢索值時遇到麻煩，因此可以將其用於操作。 我進行了一些研究，看到了很多可以返回控制台日志或運行函數的Promise教程。 但是我還沒有看到一個可以保存到const / var的文件，因此可以用於其他操作，例如setstate。

我嘗試了其他方法來解決異步函數中的諾言，因此我可以執行setstate，但是它們都失敗了，我將其范圍縮小為嘗試使用哪種控制台記錄正確信息的3種方法，但是當我setstate失敗時。

這是我的反應成分的一個例子

  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)

  }

感謝您提供任何關於如何解決此問題的技巧，或者如果我對異步或承諾的概念有誤解。

Answer 1

setState是異步操作，其中第二個參數是回調函數，在setState函數執行結束后執行。

你可以做

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

})

Answer 2

我this.setState知道您需要什么，但是this.setState將第二個參數用作回調，因此類似這樣的內容將顯示更新后的狀態

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

同樣這樣的事情應該工作：

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

並且您應該在async函數中使用await來等待數據。