我正在尝试遍历对象的对象并使用 map 列出该项目,并且我正在从 redux 获取此对象。我可以使用 console.log 这个值,但是 jsx 什么都不返回。我尝试删除{}
和return
使用()
only 但它仍然没有渲染任何东西。
我的帖子对象看起来像
posts = { 1: {id: 1, title: "Hello world"} }
组件.js
renderList(){
const { posts } = this.props;
Object.keys(posts).map(key => {
console.log(`${key} and ${posts[key].title}`);
return (
<li key={key} className="list-group-item">
{posts[key].title}
</li>
);
});
}
render(){
return (
<div>
<h2>Posts</h2>
<ul className="list-group">{this.renderList()}</ul>
</div>
);
}
我无法弄清楚我做错了什么。
您的 renderList 方法没有 return 语句。根据您的 React 版本,您可以在此处返回一个数组,或者您需要将其包装在一个 div 中(或者在这种情况下将 ul 放入其中)。
renderListOnReact16(){
const { posts } = this.props;
return Object.keys(posts).map(key => {
console.log(`${key} and ${posts[key].title}`);
return (
<li key={key} className="list-group-item">
{posts[key].title}
</li>
);
});
}
renderOnReact16(){
return (
<div>
<h2>Posts</h2>
<ul className="list-group">{this.renderList()}</ul>
</div>
);
}
renderListOnReact15(){
const { posts } = this.props;
return (
<ul className="list-group">
{Object.keys(posts).map(key => {
console.log(`${key} and ${posts[key].title}`);
return (
<li key={key} className="list-group-item">
{posts[key].title}
</li>
);
})}
);
}
renderOnReact16(){
return (
<div>
<h2>Posts</h2>
{this.renderList()}
</div>
);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句