axios 如何在同步响应中更新状态

sg2wtvxw  于 2022-11-29  发布在  iOS
关注(0)|答案(3)|浏览(221)
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)
}

我在onSave上有一个onClick事件。如果表单中有错误,我会将这些错误的状态设置为true。由于SetState是异步的,所以值不会更新到它的状态,并且当它到达if(!(this.state.errorIntialValue || this.state.errorAge || errorRollno))时总是未定义的,它返回false。if块中的代码永远不会执行。我无法找到一个正确的方法来实现这一点。我该怎么做呢?

qlfbtfca

qlfbtfca1#

可以使用unstable_batchedUpdates(如this answer中所述)使状态更新同步:

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

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

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

这种方法在这里是不适用的,需要它就表明有问题。
文档建议如果setState状态依赖于先前的状态,则使用updater函数;如果所评估的代码依赖于先前设置的状态,则使用回调函数:
设置状态()并不总是立即更新组件。它可能会批处理更新或延迟更新。这使得在调用setState后立即读取此.state()可能的陷阱。请改用componentDidUpdate或setState回呼(setState(updater,callback)),这两个函数中的任何一个都保证在应用更新后触发。如果需要基于以前的状态设置状态,请阅读下面的updater参数。
代码中并不清楚为什么临时值(errorIntialValueerrorAgeerrorRollno)应该存储在组件状态中。它们可能不应该,并且应该只更新一次,如下所示:

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

fivyi3re2#

正如@BoyWithSilverWings所指出的,最好使用setState的功能版本,以确保我们在稳定状态下运行检查。否则,当你以编程方式调用this.onSave()时,你可能会在旧版本的状态下操作。
考虑到这一点,我们利用callback去第二个参数作为@estus给出的链接。

onSave=()=>{
    this.setState(currentState = > {
        errorIntialValue: currentState.intialValue<=0,
        errorAge: currentState.age>=25|| currentState.age<=-1,
        errorRollno: currentState.rollNo<0
    }, ({errorIntialValue, errorAge, errorRollno}) => {
       if([errorIntialValue, errorAge, errorRollno].some(isInvalid=> isInvalid)){    
          let newData={
               intialValue:this.state.intialValue,
               age:this.state.age,
               rollNo:this.state.rollNo
          }
          this.props.updateData(newData)
       } 
    });
zwghvu4y

zwghvu4y3#

await this.setState({ foo: this.state.foo + 1})

相关问题