this.setState() 之后的 setState 回调函数上的 this.state答案

【问题标题】：this.state on setState callback function after this.setState()this.setState() 之后的 setState 回调函数上的 this.state
【发布时间】：2019-09-08 10:37:05
【问题描述】：

我试图在状态更新后访问 this.setState 中的 this.state。我希望将用户信息设置为状态，然后从事实来源希望将该用户数据保存到本地存储中

setUserInfo = userInfo => {
  this.setState(
    { username: userInfo.userName, password: userInfo.userPass },
    prevState => {
      //trying to access this.state but unable to
      console.log(prevState);
      // or
      console.log(this.state.username);
    }
  );
};

我知道这个代码可以做到，但是第二个 setstate 会在第一个 setState 之后确认运行吗？

setUserInfo = userInfo => {
  this.setState({ username: userInfo.userName, password: userInfo.userPass });
  this.setState(prevState => {
    prevState;
  });
};

【问题讨论】：

你可以在调用函数中使用 userInfo.userName 而不是 this.state.username
这不是违背单一事实来源的目的吗？
“无法”是什么意思？请提供可以复制问题的stackoverflow.com/help/mcve。预计prevState 会在回调中更新状态。 第二个 setState 会在第一个 setState 之后确认运行吗？ - 会，但您不需要第二个 setState。

标签： reactjs

【解决方案1】：

你绑定函数了吗

在你的constructor()里面绑定函数

this.handleClick = this.handleClick.bind(this)

handleClick() {
    this.setState({ status: 2 }, () => {
      console.log(this.state);
    });
  }

其实应该可以的

【讨论】：

不，它不应该工作，setUserInfo 显然是一个箭头并且已经绑定到类上下文。
此代码与问题中发布的代码不一致。 setUserInfo 已经是一个箭头了。
你是什么意思。 ? console.log(this.state.username); 这应该在 setState 回调中起作用，它返回什么？
我的意思是setUserInfo已经是箭头函数了，和bind绑定并没有比原来的代码有任何改进。
是的，你是对的，不需要绑定，这是我的错误。但console.log(this.state.username); 应该在那里工作它返回什么？

【解决方案2】：

setState() 函数内部的this 指的是setState 的方法，因此请区分这两个this。设置var that = this，这样你就可以像that.state.username一样使用它

var that = this;

this.setState(
  { username: userInfo.userName, password: userInfo.userPass },
  prevState => {
    //tring to access this.state.username but unable to
    console.log(prevState.username, that.state.username);
  }
);

【讨论】：