状态setState后评价

Question

在react组件中，我以各种方式更新state，但我希望在状态更新后进行评估(调用函数)。

当我执行以下操作时，secondUpdate()无法访问更新的state，因此它晚了一个周期：

firstUpdate = e => {
    this.setState({ email: e.state.value });
    // ... some validation
    secondUpdate();
}
secondUpdate() {
    const allValid= this.state.aIsValid & this.state.bIsValid & this.state.cIsValid;
    this.setState({ allIsValid: allValid });
}

如何将secondUpdate()绑定到任何或某些state更新？

Answer 1

您可以使用setState callback：

this.setState({ email: e.state.value } , () => {
   // Will get called once the state is updated
   // ... some valdidations
   secondUpdate();
});

Answer 2

allIsValid根本不应该是一个国家。如果有相互依赖的状态，则可能会导致状态不同步，从而导致逻辑中断。相反，由于allIsValid是从其他状态派生的，因此可以根据呈现内的状态计算它：

 render() {
   const { email } = this.state;
   const allIsValid = email.length > 5 && /*...*/;
    // ...
 }

Answer 3

您可能想看看这个：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

因为this.props和this.state可能是异步更新的，所以不应该依赖它们的值来计算下一个状态。 要修复它，请使用接受函数而不是对象的第二种形式的setState()。该函数将接收前一个状态作为第一个参数，在应用更新时支持作为第二个参数：

this.setState({
    // change the state
}, () => {
 //Perform something after the state is updated.
})