Javascript 一个动作完成后，如何在React js中分派动作？

在我的项目中

我正在向顾客列出餐馆名单。 过滤器主要有烹饪过滤器。客户可以选择菜肴，然后从API中提取数据并重新呈现

Redux存储以存储数据

餐厅：[]将存储餐厅的所有数据，而菜系：[]将存储过滤后的菜系ID

在componentWillMount中，我拥有从API获取餐厅并将其存储在redux商店中的逻辑

同时，它还将检查store中的菜系：[]，以从API中获取过滤后的数据

这是我的过滤器组件

我有多个菜系复选框，现在，当我选中一个复选框时，setSelectedCuisines动作被调度，如果我取消选中复选框，removeSelectedCuisine动作被调度

这个机制运行得很好，没有问题。 现在，实际问题是

每当调用SetSelectedCusines或RemoveSelectedCusines时，在完成此操作后，我希望调用API，该API根据所选过滤器获取餐厅数据

调用API之后，我还想调度操作setRestaurants，它将在商店中设置餐厅

在上面的组件中，您可以看到handleCheckBoxChange分派SetSelectedCusines和RemoveSelectedCusines。同时，我调用了一个函数，从API中获取餐馆并分派setRestaurant

这里的问题是，调用cuisines操作后立即调用setRestaurants操作，而我没有从API中获得正确过滤的数据

---

我很担心这一点，因为我不确定何时何地可以调用fetchRestaurants函数以获取过滤后的数据。

您可以像下面这样调度函数

this.props.dispatch(this.props.setRestaurants(result))

---

我会告诉你两种方法

将用于在handleChange中创建选定菜系数组的逻辑添加到变量中，并使用此值调用api并发送分派

如果选中复选框，则在与现有菜系合并或删除旧菜系后，在减速器中使用和，然后调用pubsub pubsub.publish以调用获取api的函数

---

您是否收到任何错误？没有错误，但在完成更新菜系的操作之前已从API中提取数据：[]存储中的数组，API需要更新的菜系：[]数组才能获取最新数据。能否显示restaurantActions.js？export const setRestaurants=restaurants=>{type:'SET_restaurants'，restaurants}；否，这是顺序，我选中复选框ii dispatch SetSelected Cuisines iii更新商店iv进行api调用并分派setRestaurants。问题是，在setSelectedCuisines更新商店之前，会调用API并设置餐馆。我确实按照第一个选项完成了工作，希望它能正常工作。谢谢，欢迎光临。我也会认为第一个比较容易\m/

import React from 'react';
import {connect} from 'react-redux';

import {setSelectedCuisine, removeSelectedCuisine} from './../../actions/filterActions';
import {setRestaurants} from './../../actions/restaurantActions';

import {fetchRestaurants} from './../../utils/ApiLibrary';

import {loadJsLibraries} from './../../utils/LoadLibrary';

class Filters extends React.Component {

    lat = this.props.location.latitude;
    lng = this.props.location.longitude;
    maxDistance = 50;
    category = 'nearby';
    limit = 50;
    cuisineIds = this.props.filters.cuisines || [];
    restaurantAPI = '/gokhana/restaurant/categorized';

    cuisineStatus = (id) => {
        const cuisineFound = this.props.filters.cuisines.find((cuisineId) => {
            return cuisineId === id;
        });
        return cuisineFound ? true: false;
    }

    handleCheckBoxChange = (e) => {
        let isChecked = e.target.checked;
        isChecked ? 
            this.props.setSelectedCuisine(e.target.value) 
            : this.props.removeSelectedCuisine(e.target.value);

            fetchRestaurants(
                this.restaurantAPI,
                this.lat,
                this.lng,
                this.maxDistance,
                this.category,
                this.limit,
                this.cuisineIds
            ).then(result => dispatch(this.props.setRestaurants(result)));
    }

    render() {
        return (
            <div className="col-md-3">
                <div id="filters_col">
                    <a 
                        data-toggle="collapse" 
                        href="#collapseFilters" 
                        aria-expanded="true" 
                        aria-controls="collapseFilters" 
                        id="filters_col_bt
                    "> 
                    Filters 
                        <i className="icon-plus-1 pull-right"></i>
                    </a>

                    <div className="collapse" id="collapseFilters">

                        <div className="filter_type">
                            <h6>Distance</h6>
                            <input type="text" id="range" value="" name="range"/>
                            <input type="text" id="range-test" value="" />

                            <h6>Food Type</h6>
                            <ul>
                                <li><label><input type="checkbox" className="icheck" />Veg Only</label></li>
                            </ul>
                            <h6>Outlet Type</h6>
                            <ul>
                                <li><label><input type="checkbox" className="icheck" />Restaurant</label></li>
                                <li><label><input type="checkbox" className="icheck" />Food Court</label></li>
                            </ul>
                        </div>

                        <div className="filter_type">
                            <h6>Cuisines</h6>
                            <ul className="nomargin">
                                {
                                    this.props.cuisines.map((cuisine) => {
                                        return (<li>
                                            <label className="checkbox-container">
                                                {cuisine.name}

                                                <input 
                                                    type="checkbox"
                                                    value={cuisine.id} 
                                                    className="cuisineCheckbox"
                                                    onChange={(e) => this.handleCheckBoxChange(e)}
                                                    {...this.cuisineStatus(cuisine.id) ? {checked: true} : {} }
                                                />
                                                <span className="checkmark"></span>
                                            </label>
                                        </li>)
                                    })
                                }
                                {loadJsLibraries()}

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = {
    setSelectedCuisine,
    removeSelectedCuisine,
    setRestaurants
};

export default connect(state => state, mapStateToProps)(Filters);

this.props.dispatch(this.props.setRestaurants(result))