Question

最近我在React / Redux（Thunk）上遇到了一个棘手的问题：我已经正确创建了带有Action和Reducer的Store，在我的Component中，我触发了componentDidMount方法中的Async函数来更新状态，但是状态似乎没有改变，尽管在componentDidUpdate和mapStateToProps函数中确实有所改变！为什么呢这是我的代码：

export const getAllInterventions = () => {
return dispatch => {
    dispatch(getAllDataStart());
    axios.get('/interventions.json')
        .then(res => {
            dispatch(getAllDataSuccess(res.data));
        })
        .catch(err => {
            dispatch(getAllDataFail(err));
        });
};

我的减速器：

case actionTypes.GET_ALL_INTERVENTIONS_SUCCESS:
        return {
            ...state,
            interventions: interventions: action.interventions
        };

我的组件：

    componentDidMount() {
    this.props.getAllInterventions();
    console.log('DidMount: ', this.props.inter); /*Empty Array Or Undefined */
}

const mapStateToProps = state => {
console.log('mapStateToProps', state);
return {
    inter: state.interventions,
    error: state.error
};

Answer 1

您的操作和状态更改都是异步的，在此之后console.log总是在实际完成更改之前返回。

您的状态正在更新，这就是为什么当您在mapStateToProps中console.log时它可以工作的原因。

我建议设置redux-devtools，这样您就可以轻松跟踪自己的操作/状态。

Answer 2

我希望该代码对您有用

componentWillReceiveProps(nextProps){  
    console.log(nextProps.inter)
}

无法通过Redux在componentDidMount中接收异步响应

2 个答案: