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

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等。