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块中的代码永远不会执行。我无法找到一个正确的方法来实现这一点。我该怎么做呢?
3条答案
按热度按时间qlfbtfca1#
可以使用
unstable_batchedUpdates
(如this answer中所述)使状态更新同步:这种方法在这里是不适用的,需要它就表明有问题。
文档建议如果
setState
状态依赖于先前的状态,则使用updater函数;如果所评估的代码依赖于先前设置的状态,则使用回调函数:设置状态()并不总是立即更新组件。它可能会批处理更新或延迟更新。这使得在调用setState后立即读取此.state()可能的陷阱。请改用componentDidUpdate或setState回呼(setState(updater,callback)),这两个函数中的任何一个都保证在应用更新后触发。如果需要基于以前的状态设置状态,请阅读下面的updater参数。
代码中并不清楚为什么临时值(
errorIntialValue
,errorAge
,errorRollno
)应该存储在组件状态中。它们可能不应该,并且应该只更新一次,如下所示:fivyi3re2#
正如@BoyWithSilverWings所指出的,最好使用
setState
的功能版本,以确保我们在稳定状态下运行检查。否则,当你以编程方式调用this.onSave()
时,你可能会在旧版本的状态下操作。考虑到这一点,我们利用callback去第二个参数作为@estus给出的链接。
zwghvu4y3#