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