如何仅显示项目地图（如果存在）答案

【问题标题】：How to only show map of items if they exist如何仅显示项目地图（如果存在）
【发布时间】：2015-12-28 17:06:51
【问题描述】：

我试图重复一个对象以在我的应用程序上显示一些带有反应的东西，如果我已经在对象中有项目，这工作正常，但起初（在我调用服务器之前）对象是空的，因此未定义所以它破坏了组件。我想知道处理这个问题的最佳方法是什么。我在反应背后使用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 执行此操作，但对于地图评估似乎有所不同。

我还尝试在 reducer 中默认设置它，看看我是否可以在其中设置一个默认值，并且像这样不可变：

import { Map } from 'immutable';

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

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

这似乎也不起作用。所以我想知道最好的方法是用反应来处理这样的事情吗？

【问题讨论】：

标签： javascript reactjs react-jsx immutable.js

【解决方案1】：

简单。只需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>
  }
});

我还为每个 MyFilterComponent 添加了一个 key 属性。 Read why this is important here.

【讨论】：

【解决方案2】：

添加“else return null;”在您的第一个选项中的第一个。在第二个选项上设置为数组。

【讨论】：

【解决方案3】：

一种选择是确保您的父组件始终传入有效的props.filters（基本情况下为空数组）。然后你的子组件可以盲目地迭代this.props.filters 并渲染你的<myFilterCOmponent />。

还考虑使用 react React propTypes 以确保您的组件需要一个 prop，isArray 等。

【讨论】：