如何在同步反应中更新状态 [英] How to update state in react synchronously

问题描述

onSave=()=>{
    if (this.state.intialValue<=0) {
        this.setState({errorIntialValue: true})
      }
      else
      {
      this.setState({errorIntialValue: false})
      }
      if (this.state.age>=25|| this.state.age<=-1) {
        this.setState({errorAge: true})
      }
      else{
        this.setState({errorAge: false})
      }
      if (this.state.rollNo<0) {
        this.setState({errorRollno: true})
      }
      else{
        this.setState({errorRollno: false})
      }
       if(!(this.state.errorIntialValue|| this.state.errorAge ||errorRollno)){    //have to 
                                                                    enter only if no error
    let newData={
            intialValue:this.state.intialValue,
            age:this.state.age,
            rollNo:this.state.rollNo
    }
    this.props.updateData(newData)
}

我有一个onClick事件onSave.如果以我将其状态设置为true的形式出现错误.由于SetState是异步的，因此该值将不会更新为其状态，并且在if(!(this.state.errorIntialValue || this.state.errorAge || errorRollno))时始终是未定义的，并且返回false. if块中的代码将永远不会执行. 我找不到实现此目标的合适方法.我该怎么做?

I have a onClick event onSave. If error is there in the form I'm setting the state of those to true.Since SetState is asynchronous,the value won't be updated to its state and is always undefined when it come to if(!(this.state.errorIntialValue || this.state.errorAge || errorRollno)) and it returns false. The code in if block will never get executed. I'm not able to find a proper way to achieve this.How can I do this?

推荐答案

按照此答案使状态更新同步:

// this.state.foo === 0 here

ReactDOM.unstable_batchedUpdates(() => {
    this.setState({ foo: this.state.foo + 1});
});

// this.state.foo === 1 here

此方法在此处不适用，需要它表明存在问题.

This method is not applicable here, the need for it indicates that there is a problem.

文档建议，如果setState状态取决于处于先前状态，如果评估的代码取决于先前设置的状态，则使用回调函数:

The documentation suggests to use updater function if setState state depends on previous state, and use callback function if evaluated code depends on previously set state:

setState()并不总是立即更新组件.它可能会批量更新或将更新推迟到以后.这使得在调用setState()之后立即读取this.state可能是一个陷阱.而是使用componentDidUpdate或setState回调(setState(updater，callback))，确保在应用更新后均可以触发这两种方法.如果需要基于先前的状态来设置状态，请阅读以下有关updater参数的信息.

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.

从代码中不清楚为什么临时值(errorIntialValue，errorAge，errorRollno)应以组件状态存储.它们可能不应该并且应该仅更新一次，例如:

It's unclear from the code why temporary values (errorIntialValue, errorAge, errorRollno) should be stored in component state. They likely shouldn't and should be updated only once, something like:

if (errorIntialValue || errorAge || errorRollno) {
  // update the state with errors
} else {
  // update the state with data
}

这篇关于如何在同步反应中更新状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！