Javascript 使用多个操作对React redux update state onClick函数进行响应

我正在尝试更新redux状态，遇到的问题是，当onclick函数执行多个操作时，MapStateTops没有被更新。我知道操作是异步运行的，这就是状态不能及时更新的原因。有没有办法克服这个问题

代码示例

执行onClick函数时，getCase操作将this.props.filters.active\u case\u页面作为页码 下一页操作会更改活动的\u case\u页面索引，但这里的问题是，当执行getCase操作时，this.props.getCases仍然具有this.props.filters.active\u case\u页面的旧值

OnClickFunction = () => {
    this.props.nextPage(this.props.filters.active_case_page);
    this.props.getCases(this.props.filters.active_case_page,'All','dateCreated',false,null,'5a9ee9fa88406eeeebabbd1f')
}

function mapStateToProps(state){
    return{
        filters: state.doctors.filters,
    }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({

        nextPage:nextPage,
        getCases:getCases
    },dispatch)
}

export function nextPage(){

    return{
        type:"NEXT_PAGE"
    }
}

export function getCases(pageNum,filterType,filterOption,isSearchOn,searchText,doctor_id){

    return function(dispatch){
        axios.get("/api/getCases/"+pageNum+"/"+filterType+"/"+filterOption+"/"+isSearchOn+"/"+searchText+"/"+doctor_id)
            .then(function(response){
                dispatch({type:"GET_CASES",payload:response.data});
            })
            .catch(function(err){
                dispatch({type:"GET_CASES_REJECTED",payload:err});
            })
    }
}

export function doctorsReducers(state={
    customer_cases:[],
    filters:{
        active_case_page:0,
        selected_cases_filter:'dateCreated',
        filter_options: 'All',
        isCaseSearchOn:false,
        search_cases:'',
    }

}, action){
    switch(action.type){

        case "NEXT_PAGE":
        // return the state and copy of boos array from state
            return {
                ...state,
                filters:{
                    ...state.filters,
                    active_case_page:state.filters.active_case_page+1,
                }

            }
        break;

        case "GET_CASES":
        // return the state and copy of boos array from state
            return {
                ...state,
                customer_cases:[...action.payload[0]],
            }
        break;

    }
    return state;
}

---

现在，您已经将问题弄清楚了，看起来您正在寻找一种方法，以便在第一个操作完成后发送第二个操作

我可能会这样使用

组件willreceiveprops

：

componentWillReceiveProps(nextProps){
    const {filters: {active_case_page}, getCases} = nextProps;
    if (active_case_page !== this.props.filters.active_case_page){
      getCases(active_case_page,'All','dateCreated',false,null,'5a9ee9fa88406eeeebabbd1f'
    }
}

但在我看来，整个模式并不太好。

---

我会将这两个动作放在一个动作中，并将所有动作一起处理（除非您的问题中缺少功能，因为目前我看不出有任何理由将此动作分为两个动作）

我无法理解您遇到的问题是什么，您能编辑您的问题并更具体一些吗？您想实现什么？示例代码中没有mapStateToProps函数。问题已更新请将其阅读3次，也不了解您的问题。您的组件是什么样子的？谢谢您的输入，正确，我正在尝试在第一个操作完成后分派第二个操作。我同意在这种情况下，这两个功能应该一起处理。然而，让我们假设有更多的功能，我必须分开的行动，是使用componentWillReceiveProps的唯一方式来实现同步执行，因为你的第一个行动，你的调度是一个行动，只改变你的本地状态，而不是对服务器的请求，这是我会建议的方式。如果您正在等待服务器的响应以分派另一个操作，那么我建议使用promise/async wait，但这目前不是问题所在。。。