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

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


哔哔one
浏览 106回答 1
1回答

SMILET

功能组件的默认参数被命名props,可以被破坏以获取传递的道具,如:&nbsp;&nbsp;&nbsp;function&nbsp;RenderComments({comments})&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;....
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript