如何只顯示物品的地圖，如果他們存在

我想重複一個對象來顯示一些東西在我的應用程序與反應，這工作正常，如果我已經在對象中的項目，但一開始（在我打電話之前服務器）對象是空的，因此未定義，因此它打破了組件。我想知道最好的方法是什麼。我在我的反應之後使用了immutable.js和redux。我試圖在呈現組件中是這樣的：如何只顯示物品的地圖，如果他們存在

render: function(){ 
    var filterRepeat; 
    if (this.props.filters){ 
     filterRepeat = { this.props.filters.map(function(filterGroup){ 
       if (filterGroup.filters.length > 0){ 
        return <myFilterCOmponent filterGroup={filterGroup} /> 
       } 
      }) 
      }; 
    }

然後，我只是順路{filterRepeat}，但它似乎並不喜歡這種語法。我知道你可以像普通html那樣做，但是對於地圖評估來說它看起來不同。

我也試過在減速通過默認設置，看看是否我可能只是在用一成不變的設置有這樣的默認值：

import { Map } from 'immutable'; 

var presetState = Map(); 
presetState.set('filters', {}); 

export default function reducers(state = presetState, action) {

這似乎沒有任何工作。所以我想知道最好的方法是用這樣的反應？

來源

2015-12-28 ajmajmajma

容易。只是set default props，使其始終存在：

var MyComponent = React.createClass({ 
    getDefaultProps: function() { 
    return { 
     filters: [] 
    }; 
    } 
    render: function() { 
    var filterRepeat = this.props.filters.map(function(filterGroup, i){ 
     return (
     <MyFilterComponent key={i} filterGroup={filterGroup} /> 
    ); 
    }); 

    <div>{filterRepeat}</div> 
    } 
});

我還添加了key道具各MyFilterComponent。 Read why this is important here.

來源

2015-12-28 18:30:40

加「else else null;」如果你的第一個選擇是第一個。在第二個選項中設置爲一個數組。

來源

2015-12-28 17:13:15

一個選項是確保您的父組件始終通過有效的props.filters（基本情況下爲空數組）。然後你的孩子組件可以盲目地重複this.props.filters並渲染你的<myFilterCOmponent />。

還應考慮使用反應React propTypes以確保需要您的組件的一個道具，IsArray的等

來源

2015-12-28 18:06:37 sathishpaul

如何只顯示物品的地圖，如果他們存在

回答

相關問題