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那样做，但是对于地图的评估，它似乎有所不同。

我还尝试在reducer中默认设置它，看看我是否可以在其中设置一个默认值，其中包含不可变的值：

import { Map } from 'immutable';

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

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

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

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

我还为每个key添加了MyFilterComponent道具。 Read why this is important here.

Answer 2

添加＆＃34;否则返回null;＆＃34;在你的第一个选择的第一个。在第二个选项上设置为数组。

Answer 3

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

另请考虑使用react React propTypes来确保您的组件需要支持，isArray等。

如何仅显示项目的地图

3 个答案: