[英]How to only show map of items if they exist
I am trying to repeat over an object to show some stuff on my app with react, this works fine if I have items in the object already, but at first (before I call the server) the object is empty and thus undefined so it breaks the component. 我试图重复一个对象以在我的应用程序上显示一些东西,如果我已经在对象中有项目,这会很好地工作,但是首先(在我调用服务器之前)该对象为空,因此未定义,因此中断了组件。 I'm wondering what the best way to work with this is. 我想知道最好的方法是什么。 I am using immutable.js
and redux
behind my react. 我在反应背后使用了immutable.js
和redux
。 I tried something like this in the render of the component: 我在组件的渲染中尝试了类似的方法:
render: function(){
var filterRepeat;
if (this.props.filters){
filterRepeat = { this.props.filters.map(function(filterGroup){
if (filterGroup.filters.length > 0){
return <myFilterCOmponent filterGroup={filterGroup} />
}
})
};
}
And then I just drop in {filterRepeat}
, however it does not seem to like this syntax. 然后,我只使用{filterRepeat}
,但是似乎不喜欢这种语法。 I know you can do it like that for normal html but it seems like it's different for the maps evaluate. 我知道您可以像普通html一样执行此操作,但对于地图评估似乎有所不同。
I also tried setting it by default in the reducer to see if I could just have a default value set in there with immutable like this : 我还尝试在化简器中默认设置它,以查看是否可以在其中设置不可变的默认值,如下所示:
import { Map } from 'immutable';
var presetState = Map();
presetState.set('filters', {});
export default function reducers(state = presetState, action) {
This does not seem to work either. 这似乎也不起作用。 So I am wondering with that best approach is for something like this with react? 因此,我想知道这种最佳方法是否能对这样的事情做出反应?
Easy. 简单。 Just set default props so that it always exists: 只需设置默认道具 ,使其始终存在:
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>
}
});
I also added a key
prop to each MyFilterComponent
. 我还为每个MyFilterComponent
添加了一个key
道具。 Read why this is important here. 在这里阅读为什么这很重要。
Add "else return null;" 添加“否则返回null;” at the first if of your first option. 如果您的第一个选择是第一个。 Set to an array on your second option. 在第二个选项上设置为数组。
One option would be to ensure that your parent component always passes in a valid props.filters
(empty array in the base case). 一种选择是确保您的父组件始终传递有效的props.filters
(基本情况下为空数组)。 Then your child component can blindly iterate over this.props.filters
and render your <myFilterCOmponent />
. 然后,您的子组件可以盲目地遍历this.props.filters
并呈现您的<myFilterCOmponent />
。
Also look into using react React propTypes to ensure that a prop for your component is required, isArray etc. 还要考虑使用react React propTypes以确保组件所需的prop,isArray等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.