Reactjs 反应通量-在渲染子组件之前等待道具

快速且“简单”：如何使父组件等待设置特定状态，直到每次访问父组件（而不是仅一次）时呈现子组件

更详细一点： 我希望能够根据用户输入过滤结果。我有一个控制器视图“Items”，它调用一个名为“FilterComponent”的子组件，并将过滤器状态作为道具传递。我从控制器向action creator发出初始调用，action creator从本地存储获取保存的筛选器，并将其发送到存储。基于该结果，我更新过滤器状态，并将其作为道具传递给孩子

我陷入困境的地方是找到一种方法，确保在设置过滤器状态之前不渲染“FilterComponent”。我可以让它工作，这样当我刷新页面时，它就会加载过滤器——但是当我在其他地方访问页面并导航到Items控制器时，它就会卡住

我认为这与我通过action/store获取过滤器的方式有关，它在componentDidMount（）中被调用-因为componentDidMount（）只被调用一次，我每次都需要调用它

import React, { PropTypes } from 'react';
import FilterAction from '../../Actions/FilterActions';
import BaseComponent from '../../Components/Base';
import { Form, FormGroup, FormControl, ControlLabel, InputGroup, DropdownButton, MenuItem, Button } from 'react-bootstrap';
import Select from 'react-select';
import _ from 'lodash';

class FilterComponent extends BaseComponent {
    constructor(props) {
        super(props);

        this.state = {};

        this._bind(
            'handleExperienceChange',
            'handlePriceChange',
            'applyFilter'
        );
    }

    componentDidMount() {
        this.applyFilter();
    }

    handlePriceChange(price) {
        var filter = {};
        var product = this.props.product.tag;

        filter[product] = {
            price: price ? price.value : null
        };

        let updatedState = _.merge(this.state, {
            selectedPrice: price || null
        });

        this.updateFilter(filter);

        this.setState(updatedState);
    }

    getPrice() {
        var price = this.props.lang.select.prices;
        var priceSelect = [];

        Object.keys(price).map(function (key) {
            priceSelect.push({
                value: key,
                label: price[key]
            });
        });

        return priceSelect;
    }

    applyFilter() {
        var filters = this.props.filters || null;
        var product = this.props.product || null;

        if (filters && product && filters[product.tag]) {
            var selectedPrice = filter.price ? {
                value: filter.price,
                label: this.props.lang.select.prices[filter.price]
            } : false;
        }

        var updatedState = {
            selectedPrice: selectedPrice || false
        };
        this.setState(_.merge(this.state, updatedState));
    }

    updateFilter(filter) {
        FilterAction.update(filter);
    }

    render() {
        const { product, lang } = this.props;

        return (
            <div className="filter">
                <div className="flex">
                    <div className="pane-50">
                        <Select  name="price"
                                 placeholder={lang.general.form.input.price}
                                 value={this.state.selectedPrice}
                                 options={this.getPrice()}
                                 onChange={this.handlePriceChange}
                                 searchable={false} />
                    </div>
                </div>
            </div>
        );
    }
}

export default FilterComponent;

import React，{PropTypes}来自'React'；
从“../../Actions/FilterActions”导入FilterAction；
从“../../Components/Base”导入BaseComponent；
从“react bootstrap”导入{Form，FormGroup，FormControl，ControlLabel，InputGroup，DropdownButton，MenuItem，Button}；
从“反应选择”导入选择；
从“lodash”进口；
类FilterComponent扩展了BaseComponent{
建造师（道具）{
超级（道具）；
this.state={}；
这个(
“handleExperienceChange”，
“handlePriceChange”，
“applyFilter”
);
}
componentDidMount（）{
this.applyFilter（）；
}
手部价格变化（价格）{
变量过滤器={}；
var product=this.props.product.tag；
过滤器[产品]={
price:price？price.value:null
};
让updatedState=\ u0.merge（this.state{
selectedPrice:price | | null
});
此.updateFilter（过滤器）；
this.setState（updatedState）；
}
getPrice（）{
var price=this.props.lang.select.prices；
var priceSelect=[]；
Object.key（price）.map（function（key）{
价格选择推送({
值：键，
标签：价格[键]
});
});
返回价格选择；
}
applyFilter（）{
var filters=this.props.filters | | null；
var product=this.props.product | | null；
if（过滤器和产品过滤器和[product.tag]）{
var selectedPrice=filter.price{
值：filter.price，
标签：this.props.lang.select.prices[filter.price]
}：假；
}
var updatedState={
selectedPrice:selectedPrice | | false
};
this.setState（u.merge（this.state，updatestate））；
}
更新过滤器（过滤器）{
FilterAction.update（过滤器）；
}
render（）{
const{product，lang}=this.props；
返回(
);
}
}
导出默认过滤器组件；

您是否收到任何错误？变量

filter

在

applyFilter（）

中似乎未定义

此外，尽管不相关，但您可以通过使用新键和值调用

setState（）

来设置状态，而不必创建整个新状态：

而不是：

var updatedState = {
    selectedPrice: selectedPrice || false
};
this.setState(_.merge(this.state, updatedState));

您可以简单地执行以下操作：

this.setState({
    selectedPrice: selectedPrice || false
});

<>最后，考虑调用<代码> Apple Fielter（）/<代码>从代码>组件WITHULL（）/<代码>，因为它影响了组件的呈现方式。在

render（）

之前调用code>componentWillMount（）

---

为获得更快的帮助，请考虑在CODEPTN或类似服务上创建项目的简化、隔离但工作示例。

< P>如果您的状态未准备好，只需从ReNDRE（）方法返回NULL。无论何时更新状态或道具，render（）都将再次运行。状态就绪后，将子组件按正常方式返回

render() {
    const { product, lang } = this.props;

    if (!this.state.selectedPrice)
      return null;

    return (
        <div className="filter">
            <div className="flex">
                <div className="pane-50">
                    <Select  name="price"
                             placeholder={lang.general.form.input.price}
                             value={this.state.selectedPrice}
                             options={this.getPrice()}
                             onChange={this.handlePriceChange}
                             searchable={false} />
                </div>
            </div>
        </div>
    );
}

render（）{
const{product，lang}=this.props；
如果（！this.state.selectedPrice）
返回null；
返回(
);
}

Itemsrender方法中是否存在此状态，并且仅在设置状态时将

FilterComponent

作为子项包含在内？比如（在jsx中）

{this.state.filters？：'Loading…}

谢谢你的回复！当我在特定页面上进行浏览器刷新时，它可以工作，但当我在其他地方进入页面并导航到“项目”页面时，它在“加载…”时不会出现错误。也许我的孩子是个问题？我已经更新了我的答案并包含了我的子组件的代码。我还注意到，当我点击refresh时，它会在父级中调用render（）3次，第三次调用设置了过滤器，但是当我从另一个页面导航到它时，它只渲染两次，而且两次过滤器都未定义。您的代码似乎在混合和匹配

this.props.filters

和

this.state.filters

，这对我来说毫无意义。在

updateFilters

中，您设置了

this.state.filters

，但实际上从未在任何地方使用该状态；您可以在

applyFilter

中使用

this.props.filters

。这可能是您的问题吗？很抱歉让您感到困惑，示例是my child组件，它只依赖于

this.props.filters

（请参阅

applyFilters（）

）。

updateFilters

中的过滤器状态不再使用，因为我现在将任何更新的过滤器直接保存到存储器中，因此请忽略该位（我已重新