如何僅顯示項目地圖（如果存在）

Question

我試圖重復一個對象以在我的應用程序上顯示一些東西，如果我已經在對象中有項目，這會很好地工作，但是首先（在我調用服務器之前）該對象為空，因此未定義，因此中斷了組件。 我想知道最好的方法是什么。 我在反應背后使用了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) {

這似乎也不起作用。 因此，我想知道這種最佳方法是否能對這樣的事情做出反應？

Answer 1

簡單。 只需設置默認道具 ，使其始終存在：

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

我還為每個MyFilterComponent添加了一個key道具。 在這里閱讀為什么這很重要。

Answer 2

添加“否則返回null；” 如果您的第一個選擇是第一個。 在第二個選項上設置為數組。

Answer 3

一種選擇是確保您的父組件始終傳遞有效的props.filters （基本情況下為空數組）。 然后，您的子組件可以盲目地遍歷this.props.filters並呈現您的<myFilterCOmponent /> 。

還要考慮使用react React propTypes以確保組件所需的prop，isArray等。