Question

我正在将redux与reactjs一起使用。
我正在尝试在对它进行了变异的操作之后立即访问存储变量值。

单击按钮后，我将触发如下操作：

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

challengeValidated 和 password 绑定到道具，这要归功于mapStateToProps像这样的redux方法：

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

updateChallengeStatus 绑定到道具，这要归功于 mapDispatchToProps 这样的redux方法：

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。我认为这可能是因为 dispatch 是一个异步调用，但是在阅读文档后，它似乎不是。

Answer 1

您正试图在分派动作后立即查看React组件prop的内容。您无法做到这一点-React尚未有机会进行真正的重新渲染和更新，因为您仍处于执行当前点击处理程序的中间。因此，this.props.whatever仍与函数开始执行时的状态相同。

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

1 个答案: