如何解决一个承诺在反应中设定状态答案

【问题标题】：How do a resolve a promise to setstate in react如何解决一个承诺在反应中设定状态
【发布时间】：2019-08-01 16:54:48
【问题描述】：

我是 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)

  }

感谢您提供任何关于如何解决此问题的提示，或者如果我对异步或承诺的概念有误解。

【问题讨论】：

在你的 getCurrentUser 函数中你没有等待任何东西？

标签： javascript reactjs

【解决方案1】：

setState为异步操作，其中第二个参数为回调函数，在setState函数执行完毕后执行。

你可以的

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

})

【讨论】：

谢谢，有没有办法将用户数据保存到声明的变量中，以便以后使用？因为当我尝试在函数中插入“const newdata = userData”时会出现错误，或者当我尝试添加返回用户数据时，它不会返回用户数据，而是返回整个承诺。

【解决方案2】：

我不知道你到底需要什么，但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来等待数据。

【讨论】：