javascript - 同步操作调用后立即调用时存储值错误

Question

我正在使用 redux 和 Reactjs。
我正在尝试在调度改变存储变量值的操作后立即访问它。

单击按钮后，我会触发如下操作:

submit = () => {
 this.props.updateChallengeStatus(this.props.password);
 alert(this.props.challengeValidated)
};

challengeValidated 和 password 借助 mapStateToProps redux 方法绑定(bind)到 props，如下所示:

const mapStateToProps = (state) => ({
    password: state.password.value,
    challengeValidated: state.challenge.challengeValidated
});

updateChallengeStatus 借助 ma​​pDispatchToProps redux 方法绑定(bind)到 props，如下所示:

const mapDispatchToProps = dispatch => ({
    updateChallengeStatus: passwordValue => dispatch(updateChallengeStatus(passwordValue))
});

我已经检查过，passwordValue 已正确传递给分派(dispatch)的操作。

我的 redux 操作定义如下:

export function updateChallengeStatus(passwordValue){
    const credential = "c2VrdXJpdGF5";
    const challengeValidated = passwordValue === atob(credential);
    return {
        type: VALIDATE_CHALLENGE,
        payload: challengeValidated
    }
}

和我的 reducer :

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 的值更改为操作负载。

由于某种原因，我的警报一直显示错误。尽管我实际上确信我的状态发生了变化，因为我正在使用react-devtools，并且我的challengeValidated实际上在过程结束时设置为true。我认为这可能是因为 dispatch 是一个异步调用，但在阅读文档后发现它不是。

Answer 1

您尝试在分派(dispatch)操作后立即查看 React 组件 prop 的内容。你不能这样做 - React 还没有机会真正重新渲染和更新，因为你仍然在执行当前的点击处理程序。因此，this.props.whatever 仍将与函数开始执行时相同。