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

Question

我试图在我的一个函数中使用 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)
   }
}

Answer 1

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

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

Answer 2

setState() 操作是异步的，您的 console.log() 将在 setState() 改变您从 false 设置的 isregistered 的值之前执行至 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()

中使用回调更简洁

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

State in React not changing with setState method

javascript

function

setstate

reactjs

react-state