React Flux - 渲染子组件前等待道具

Question

快速和“简单”：如何让我的父组件等待某个特定的状态，直到我每次访问父项时渲染子组件（不仅一次）？

更详细一些： 我希望能够根据用户输入过滤结果。我有一个控制器视图“Items”，它调用一个名为“FilterComponent”的子组件，并将过滤器状态作为道具传递。我首先从控制器调用一个动作创建器，该动作创建器从本地存储获取已保存的过滤器并将其分发到商店。基于这个结果，我更新了过滤器状态并将其作为道具传递给了孩子。

我陷入困境的地方是找到一种方法来确保在设置过滤器状态之前不会呈现“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; 

Answer 1

您是否收到任何错误？变量filter似乎未在您的applyFilter()中定义。

此外，虽然无关，您可以通过调用setState()新键和值设置状态，不必创建整个新状态：

相反的：

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

你可以简单地做：

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

最后，考虑componentWillMount()调用applyFilter()，因为它影响的组件是如何rendere d。在render()之前调用componentWillMount()。

为了获得更快的帮助，请考虑在codepen或类似的服务上创建一个简化的，孤立但可行的项目示例。

Answer 2

如果你的状态没有准备好，只需从你的render（）方法返回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> 
    ); 
}