我正在尝试显示对象循环。通过console.log
显示,但未在浏览器中显示。我当前的代码如下:
class Profile extends React.Component {
renderList() {
const { booking } = this.props;
booking && Object.keys(booking).map(x => {
console.log("booking", booking[x].item_name);
return <div>{booking[x].item_name}</div>
})
}
render() {
return (
{this.renderList()}
)
}
}
我尝试了for
循环,map
以及lodash,并且得到了相同的结果,所以我认为这不是对象的循环方法的问题。
答案 0 :(得分:2)
您还需要返回元素。试试这个:
class Profile extends React.Component {
renderList() {
const { booking } = this.props;
if (booking) {
return Object.keys(booking).map(x => {
return <div>{booking[x].item_name}</div>
})
}
return null;
}
render() {
return this.renderList();
}
}
可能return bookings && Object.keys(booki...
也将起作用。
更新:return ({ this.renderList() })
将给出jsx语法错误,应如上所述编写。
答案 1 :(得分:1)
class Profile extends React.Component {
static defaultProps = {
booking: {
first_item: {
item_name: "First name"
},
second_item: {
item_name: "Second name"
}
}
}
renderList = () => {
const { booking } = this.props;
return booking ? Object.keys(booking).map(x => <div>{booking[x].item_name}</div>) : null
}
render() {
return (
<div>
{this.renderList()}
</div>
)
}
}