Javascript 在同步操作调用之后立即调用时存储值错误
我正在将redux与reactjs一起使用。Javascript 在同步操作调用之后立即调用时存储值错误,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,我正在将redux与reactjs一起使用。 我正在尝试在发送了使存储变量发生变异的操作之后立即访问存储变量值 单击按钮时,我会触发如下操作: submit = () => { this.props.updateChallengeStatus(this.props.password); alert(this.props.challengeValidated) }; const mapStateToProps = (state) => ({ password: state
我正在尝试在发送了使存储变量发生变异的操作之后立即访问存储变量值 单击按钮时,我会触发如下操作:
submit = () => {
this.props.updateChallengeStatus(this.props.password);
alert(this.props.challengeValidated)
};
const mapStateToProps = (state) => ({
password: state.password.value,
challengeValidated: state.challenge.challengeValidated
});
const mapDispatchToProps = dispatch => ({
updateChallengeStatus: passwordValue => dispatch(updateChallengeStatus(passwordValue))
});
challengeValidated和password通过MapStateTrops redux方法绑定到道具,如下所示:
submit = () => {
this.props.updateChallengeStatus(this.props.password);
alert(this.props.challengeValidated)
};
const mapStateToProps = (state) => ({
password: state.password.value,
challengeValidated: state.challenge.challengeValidated
});
const mapDispatchToProps = dispatch => ({
updateChallengeStatus: passwordValue => dispatch(updateChallengeStatus(passwordValue))
});
updateChallengeStatus绑定到道具,这要归功于mapDispatchToPropsredux方法,如下所示:
submit = () => {
this.props.updateChallengeStatus(this.props.password);
alert(this.props.challengeValidated)
};
const mapStateToProps = (state) => ({
password: state.password.value,
challengeValidated: state.challenge.challengeValidated
});
const mapDispatchToProps = dispatch => ({
updateChallengeStatus: passwordValue => dispatch(updateChallengeStatus(passwordValue))
});
我已检查,passwordValue已正确传递给已调度的操作
我的redux操作定义如下:
export function updateChallengeStatus(passwordValue){
const credential = "c2VrdXJpdGF5";
const challengeValidated = passwordValue === atob(credential);
return {
type: VALIDATE_CHALLENGE,
payload: challengeValidated
}
}
还有我的减速机:
function challengeReducer(state = {challengeValidated: false}, action){
switch (action.type) {
case VALIDATE_CHALLENGE:
return Object.assign({}, state, {
challengeValidated: action.payload
});
default:
return state
}
}
在这里,我将challengeValidated的初始状态设置为false,然后在调度操作时,将我的challengeValidated的值更改为操作负载
由于某些原因,我的警报一直显示false。尽管我确实确信我的状态会发生变化,因为我正在使用react devtools,并且我的challengeValidated在流程结束时实际设置为true。
我认为这可能是因为分派是一个异步调用,但在阅读文档后,它似乎不是。您试图在分派操作后立即查看React组件道具的内容。你不能这样做-反应还没有机会重新渲染和更新,因为你仍然在执行当前的点击处理程序的中间。因此,
this.props.which
仍将与函数开始执行时相同。您试图在调度操作后立即查看React组件prop的内容。你不能这样做-反应还没有机会重新渲染和更新,因为你仍然在执行当前的点击处理程序的中间。因此,this.props.无论什么
都将与函数开始执行时一样。我对redux的理解非常困扰,以至于完全忘记了组件的生命周期。将此警报放在componentDidUpdate生命周期方法中就成功了。谢谢,我为理解redux而烦恼,以至于完全忘记了组件的生命周期。将此警报放在componentDidUpdate生命周期方法中就成功了。非常感谢。