Question

我目前正在使用react和redux构建我的第一个应用程序。我已经构建了一些过滤器，当用户选择过滤器时，它将使用新的过滤器值更新商店，然后请求新的结果。

使用新的过滤器值更新存储，但是在存储完成更新之前发生了获取请求，因此返回的值不正确。

如何在提取获取请求之前等待商店更新？

以下是我的代码......

const mapStateToProps = (state) => {
    return {
        dataFilter: state.dataFilter
    }
};

class Filters extends Component {
constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
}

handleChange(value, dispatcher){
    dispatcher(value.props["data-attr"]);

    this.props.resultsFetchData('/api/deals/?data=' + this.props.dataFilter);
}

render() {
    const dataFilters = {
        0: <span data-attr="0">Any</span>,
        20: <span data-attr="1">1GB+</span>,
        40: <span data-attr="2">2GB+</span>,
        60: <span data-attr="5">5GB+</span>,
        80: <span data-attr="10">10GB+</span>,
        100: <span data-attr="99.99">Unltd</span>
    };

    return (
        <div className="filters">
            <div className="row">
                <div className="col-sm-4 filters--slider">
                    <Slider
                        min={0}
                        marks={dataFilters}
                        step={null}
                        defaultValue={this.props.dataFilter}
                        onChange={e => {this.handleChange(dataFilters[e], this.props.setDataFilter)}} />
                </div>
            </div>
        </div>
        );
    }
}

export default connect(mapStateToProps, {setDataFilter, resultsFetchData})(Filters)

Filters.propTypes = {
dataFilter: PropTypes.string
}

Answer 1

使用componentWillReceiveProps作为我的解决方案......

componentWillReceiveProps(nextProps){
    if(nextProps.dataFilter !== this.props.dataFilter){
        this.props.resultsFetchData('/api/deals/?data=' + nextProps.dataFilter);
    }
}

handleChange(value, dispatcher){
    dispatcher(value.props["data-attr"]);
}

React / Redux等待商店更新

1 个答案: