React 中的状态不会随 setState 方法改变答案

【问题标题】：State in React not changing with setState methodReact 中的状态不会随 setState 方法改变
【发布时间】：2020-09-11 15:06:09
【问题描述】：

我试图在我的一个函数中使用setState 方法更新我的状态，但状态并没有以某种方式改变。我还在该函数中使用if 语句来告诉 setState 何时实际更改状态。当if 语句为true 时，我在console.log 中收到正确的消息，但我的状态仍然没有改变。什么可能导致错误？

我的功能和状态：

constructor(props) {
    super(props);
    this.state = {
        isregistered: false
    }
}

handleValidate = (validate) => {
    const state1 = this.state
    console.log('state1', state1)
    const validate1 = validate
    console.log('l]plik validate', validate1)
    if ( validate.length != 0){
        this.setState({
            isregistered: true
        })
        console.log('onregatud', this.state.isregistered)
   }
   else{
        console.log('mitteregatud', this.state.isregistered)
   }
}

【问题讨论】：

请出示render
此功能未连接到我的 UI 按钮或任何东西。句柄 validate 最终在方法 componentDidMount 下被调用，并在用户进入该页面时启动。
这能回答你的问题吗？ Why calling react setState method doesn't mutate the state immediately?

标签： javascript reactjs function setstate react-state

【解决方案1】：

这不是错误，setState 是异步的。如果你想在 setState 之后检查状态，你需要传递一个回调：

this.setState({myState : newState}, () => console.log(this.state.myState))

【讨论】：

【解决方案2】：

setState() 操作是异步的，您的console.log() 将在setState() 将isregistered 的值从false 设置为true 之前执行，因此您看不到结果。

我们可以通过两种方式解决这个问题：

通过将回调函数传递给setState()

 const handleValidate = (validate) => {
  const state1 = this.state
  const validate1 = validate
   if ( validate.length != 0){
     this.setState(
     { isregistered: true }, 
     () => console.log('callback fired', this.state));
   } else {
     console.log('mitteregatud', this.state.isregistered);
   }
 }

通过使用async-await

async function handleValidate(validate) {
  const state1 = this.state
  const validate1 = validate
   if ( validate.length != 0){
     await this.setState({ isregistered: true})
     // More code here based on state outside callback
     console.log('onregatud', this.state.isregistered)
   } else {
     console.log('mitteregatud', this.state.isregistered)
   }
}

使用async-await 比在setState() 中使用回调更简洁

【讨论】：