类型错误：comments.map 不是 React 中的函数

Question

映射时出现以下错误：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;

Answer 1

功能组件的默认参数被命名props，可以被破坏以获取传递的道具，如：

   function RenderComments({comments}) {
      ....