React 新手,尝试循环对象属性,但 React 抱怨对象不是有效的 React 子对象,有人可以给我一些关于如何解决此问题的建议吗?我已经添加了 createFragment 但不完全确定需要去哪里或者我应该采取什么方法?
JS
var tifs = {1: 'Joe', 2: 'Jane'};
var tifOptions = Object.keys(tifs).forEach(function(key) {
return <option value={key}>{tifs[key]}</option>
});
渲染功能
render() {
const model = this.props.model;
let tifOptions = {};
if(model.get('tifs')) {
tifOptions = Object.keys(this.props.model.get('tifs')).forEach(function(key) {
return <option value={key}>{this.props.model.get('tifs')[key]}</option>
});
}
return (
<div class={cellClasses}>
<div class="grid__col-5 text--center grid__col--bleed">
<h5 class="flush text--uppercase">TIF</h5>
<select id="tif" name="tif" onChange={this.handleChange}>
{tifOptions}
</select>
</div>
</div>
);
}
控制台出错
If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object)
问题是你使用的方式forEach()
,因为它总是会返回undefined
。您可能正在寻找map()
方法,它返回一个新数组:
var tifOptions = Object.keys(tifs).map(function(key) {
return <option value={key}>{tifs[key]}</option>
});
如果您还想使用forEach()
,你必须这样做:
var tifOptions = [];
Object.keys(tifs).forEach(function(key) {
tifOptions.push(<option value={key}>{tifs[key]}</option>);
});
Update:
如果你正在编写 ES6,你可以使用更简洁的方式完成同样的事情箭头函数:
const tifOptions = Object.keys(tifs).map(key =>
<option value={key}>{tifs[key]}</option>
)
这是一个显示上述所有选项的小提琴:https://jsfiddle.net/fs7sagep/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)