javascript - 如何仅显示项目 map (如果存在)

Question

我试图重复一个对象，以通过 React 在我的应用程序上显示一些内容，如果我在对象中已有项目，则效果很好，但首先(在我调用服务器之前)该对象是空的，因此未定义所以它破坏了组件。我想知道处理这个问题的最佳方法是什么。我在 React 后面使用 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 那样做，但对于 map 评估来说似乎是不同的。

我还尝试在 reducer 中将其设置为默认值，看看是否可以在其中设置一个不可变的默认值，如下所示:

import { Map } from 'immutable';

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

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

这似乎也不起作用。所以我想知道最好的方法是用 React 来做这样的事情？

Answer 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.