类型错误：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，可以被破坏以获取传递的道具，如：&nbsp;&nbsp;&nbsp;function&nbsp;RenderComments({comments})&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;....