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

Question

我正在尝试重复一个对象以通过 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 那样做，但地图评估似乎有所不同。

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

import { Map } from 'immutable';

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

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

这个好像也不行。所以我想知道最好的方法是像这样的反应吗？

Answer 1

在第一个选项的第一个 if 处添加 "else return null;"。在第二个选项中设置为数组。

Answer 2

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

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

Answer 3

简单。只是 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.

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

How to only show map of items if they exist

javascript

reactjs

react-jsx

immutable.js