Question

在我的React JS项目中。

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

Redux Store存储数据

{
    restaurants: [],
    filters: {
        cuisines: []
    }
}

restaurants: []会存储所有餐厅的数据，而cuisines: []会存储已过滤的美食ID。

在componentWillMount()中，我有从API获取餐馆并将其存储在redux商店中的逻辑。

同时，它还会检查商店中的cuisines: []以获取API中的过滤数据。

这是我的过滤器组件。

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);

我有多个菜单复选框，现在，当我选中一个复选框时，会调度setSelectedCuisines操作，如果取消选中复选框，则会调度removeSelectedCuisine。

这种机制工作正常，没问题。现在，实际问题是。

每当调用setSelectedCuisines或removeSelectedCuisines时，在完成此操作后，我想调用基于所选过滤器获取餐馆数据的API。

在调用API之后，我还想发送动作setRestaurants，这将设置商店中的餐馆。

在上面的组件中，您可以看到handleCheckBoxChange调度setSelectedCuisines和removeSelectedCuisines。同时我调用一个函数来从API获取餐馆并发送setRestaurant。

问题在于，调用菜肴操作后我会立即调用setRestaurants操作，而我没有从API中获取正确过滤的数据。

我很担心这一点，因为我不知道在何时何地可以调用fetchRestaurants()函数以便我获得过滤数据。

Answer 1

我会告诉你两种方法，

将handleChange（）中创建所选菜系数组的逻辑添加到变量中，并使用此值调用api并发送调度。
使用pub-sub和reducer中的内容，在选中复选框时与现有菜肴合并，或者删除旧菜单，然后调用pubsub PubSub.publish（）来调用取出的函数你的api。

Answer 2

您可以发送如下功能

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

如何在一个操作完成后在React js中调度操作？

2 个答案: