[英]Function doesn't do anything
基本上,我将对象数组作为参数发送到我的函数中,但是该函数不执行任何操作。 当我要打印对象数组时,可以在控制台上显示所有项目,但是无法渲染它们。
renderComment()函数无效或不返回任何内容。 另外,您还可以仔细查看我的render方法,您将看到注释后的代码在控制台中打印出renderComment的预期输出。
class DishDetails extends Component {
renderDish(dish) {
if (dish) {
return (
<div>
<Card className="col-12 col-md-5 m-1">
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
</div>
)
} else {
return (
<div></div>
)
}
}
renderComments(comments) {
comments.map(comment => {
return (
<li key={comment.id}>
<p>{comment.comment}</p>
<p>{comment.author}</p>
</li>
)
})
}
render() {
const selected = this.props.selectedDish;
/* if(selected) {
this.props.selectedDish.comments.map(comment => {
console.log(comment.comment)
})
} */
return (
<div>
{selected &&
<div>
{this.renderDish(this.props.selectedDish)}
{this.renderComments(this.props.selectedDish.comments)}
</div>
}
</div>
)
}
}
export default DishDetails
renderComment
函数不返回任何内容,因为该函数中没有return
语句。 map
有一个return
(仍然是必需的),但这不是该函数的return
。
要解决此问题,请在renderComment
的顶部添加一个return
,如下所示:
renderComment(comments) {
return comments.map(comment => {
return (
<li key={comment.id}>
<p>{comment.comment}</p>
<p>{comment.author}</p>
</li>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.