在onClick函数中没有获取当前状态

新的反应和redux和努力与国家管理一点。在下面的代码中，我有一个按钮。点击它会触发两步功能：在onClick函数中没有获取当前状态

1）调用reducer做一些验证，并根据它是否成功更新状态标志。

2）如果验证失败，则使用更新后的状态标志通知用户，如果成功则继续正常进程。

transfer() { 
    this.props.validateData(); 
    this.notifyOrSend(this.props.validationSucceeded); 
} 

notifyOrSend(validationSucceeded) { 
    if (validationSucceeded === false) { 
    this.refs.validationModal.showModal(); 
    } else { 
    this.props.sendTransfer(); 
    } 
} 

render() { 
    return (
     <div> 
     <Button label="Transfer" onClickFn={this.transfer}/> 
     <ValidationModal ref="validationModal"/> 
     </div> 
); 
}

...

function mapStateToProps(state) { 
    return { 
    validationSucceeded: state.validatedData.validationSucceeded, 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 
    validateData, 
    }, dispatch); 
}

我的问题是，我得到一个旧版本的标志（this.props.validationSucceeded）的。该标志的初始状态为真。如果第一次点击该按钮时验证失败，则this.props.validationSucceeded的值将保持为true。仅在第二次点击时才会选择更改为false。我可以在控制台中看到触发的动作具有nextState中该标志的最新值。我如何更改此代码以获得最新价值？

来源

2016-11-03 Alex S

setState更像是一个事件，它不会马上发生，因此为什么你可以传递第二个函数给setState，一旦它实际发生就会执行。

由于您在紧接着调用notifyOrSend之后，在下一个渲染发生之前，状态将保持不变。我会考虑将notifyOrSend函数移动到组件的适当生命周期方法中。我认为它可能是componentDidUpdate或componentWillUpdate，这取决于notifyOrSend函数实际做了什么。

从反应文档：

的setState（）不立即发生变异this.state但创建未决状态转变。调用方法后访问this.state可能会返回现有值。没有保证同步操作对setState的调用，并且调用可能为进行批处理以提高性能。

来源

2016-11-03 21:27:45 finalfreq

感谢您的回复。我确实尝试了componentWillUpdate和componentWillReceiveProps，他们在初始点击时工作，但是还有一个次要问题。如果用户不纠正错误数据，并且验证标志保持为假，那么状态不会更改，并且不会调用生命周期方法。我需要通知在验证标志为false时每次点击按钮时触发。 –

您是否在任何地方使用shouldcomponentupdate？因为状态实际上不会改变它，因此更可能不会触发组件的重新渲染，也不会触发该逻辑。如果是我，我需要你所问的，我不会做任何这种状态，并有'validateData'只是一个函数，返回true或false，并没有被绑定到reducer。然后，您只需使用'validateData'的结果调用notifyOrSend，但我只能看到很多代码，并且可能不适合您 – finalfreq

在onClick函数中没有获取当前状态

回答

相关问题