映射时出现以下错误:TypeError: comments.map 不是函数。请帮助我解决以下错误。我哪里出错了,它作为一个组件工作正常,但是一旦我将我的 RenderComments 转换为函数,它就会返回以下错误。
DishDetail 文件:
import React from "react";
import { Card, CardImg, CardBody, CardTitle, CardText } from "reactstrap";
function RenderDish({ dish }) {
return (
<Card>
<CardImg width="100%" src={dish.image} alt={dish.name} />{" "}
<CardBody>
<CardTitle> {dish.name} </CardTitle>{" "}
<CardText> {dish.description} </CardText>{" "}
</CardBody>{" "}
</Card>
);
}
function RenderComments(comments) {
if (comments != null) {
return (
<div>
<h4> Comments </h4>{" "}
<ul className="list-unstyled">
{" "}
{comments.map(comment => {
return (
<li key={comment.id}>
<p> {comment.comment} </p>{" "}
<p>
{" "}
--{comment.author},{" "}
{Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "short",
day: "2-digit"
}).format()}{" "}
</p>{" "}
</li>
);
})}{" "}
</ul>{" "}
</div>
);
} else {
return <div> </div>;
}
}
const DishDetail = props => {
if (props.dish != null) {
return (
<div className="container">
<div className="row">
<div className="row my-5">
<div className="col-12 col-md-5 m-1">
<RenderDish dish={props.dish} />{" "}
</div>{" "}
<div className="col-12 col-md-5">
<RenderComments comment={props.dish.comments} />{" "}
</div>{" "}
</div>{" "}
</div>{" "}
</div>
);
} else {
return <div> </div>;
}
};
export default DishDetail;
SMILET
相关分类