TypeError: comments.map 不是函数 react js

Question

当我选择一个对象时出现错误，当前评论文件存储在另一个文件中，我正在这个文件中访问它，但出现错误

TypeError: comments.map 不是一个函数

我的代码：

import React from "react";

import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from "reactstrap";

function RenderDish({ dish }) {

  if (dish != null) {

    return (

      <div className="col-12 col-md-5 m-1">

        <Card>

          <CardImg width="100%" object src={dish.image} alt={dish.name}></CardImg>

          <CardBody>

            <CardTitle>{dish.name}</CardTitle>

            <CardText>{dish.description}</CardText>

          </CardBody>

        </Card>

      </div>

    );

  } else {

    return <div></div>;

  }

}

function RenderComments(comments) {

  if (comments != null) {

    const commentsList = comments.map((Comment) => {

      return (

        <div className="container">

          <li key={Comment.id}>

            <p>{Comment.Comment}</p>

            <p>

              -- {Comment.author},

              {new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "2-digit" }).format(new Date(Date.parse(Comment.id)))}

            </p>

          </li>

        </div>

      );

    });

    return (

      <div className="col-12 col-md-5 m-1">

        <h3>Comments</h3>

        <ul className="list-unstyled">{commentsList}</ul>

      </div>

    );

  } else {

    return <div></div>;

  }

}

const DishDetail = (props) => {

  console.log("Dishdetail Component render invoked");

  if (props.dish != null) {

    return (

      <div className="row">

        <RenderDish dish={props.dish} />

        <RenderComments comments={props.dish.comments} />

      </div>

    );

  } else {

    return <div></div>;

  }

};

export default DishDetail;

Answer 1

我得到了同样的错误。在我的例子中，通过在主要组件中选择索引 0 而不是完整数组，错误地传递了单个数组项。comments={this.state.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId, 10))[0]}在主组件中。更正版本：const DishWithId = ({ match }) => {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DishDetail dish={this.state.dishes.filter((dish) => dish.id === parseInt(match.params.dishId, 10))[0]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; comments={this.state.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId, 10))} />&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }

Answer 2

我很抱歉这个答案是矫枉过正。你传入的任何 like 都comment={comment}将作为对象成为 props 的一部分，因此你需要从中解构评论。您也不需要在条件渲染期间返回空的 div。什么都不返回是一样的。还有，value != null不够。如果该值是任何其他类型的假值，您的应用程序仍会崩溃，因此!value更安全。如果您要有条件地内联渲染，则使用&&or 三元? :而不是标准if.import React from "react";import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from "reactstrap";const RenderDish = ({ dish }) => (&nbsp; dish && (&nbsp; &nbsp; <div className="col-12 col-md-5 m-1">&nbsp; &nbsp; &nbsp; <Card>&nbsp; &nbsp; &nbsp; &nbsp; <CardImg width="100%" object src={dish.image} alt={dish.name}></CardImg>&nbsp; &nbsp; &nbsp; &nbsp; <CardBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CardTitle>{dish.name}</CardTitle>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CardText>{dish.description}</CardText>&nbsp; &nbsp; &nbsp; &nbsp; </CardBody>&nbsp; &nbsp; &nbsp; </Card>&nbsp; &nbsp; </div>&nbsp; ));const RenderComments = ({ comments }) => (&nbsp; comments && (&nbsp; &nbsp; <div className="col-12 col-md-5 m-1">&nbsp; &nbsp; &nbsp; <h3>Comments</h3>&nbsp; &nbsp; &nbsp; <ul className="list-unstyled">{&nbsp; &nbsp; &nbsp; &nbsp; comments.map(comment => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={comment.id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{comment.comment}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -- {comment.author},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {new Intl.DateTimeFormat("en-US", {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; year: "numeric",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; month: "short",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; day: "2-digit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).format(new Date(Date.parse(comment.id)))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; }</ul>&nbsp; &nbsp; </div>&nbsp; ));const DishDetail = ({ dish }) => (&nbsp; dish && (&nbsp; &nbsp; <div className="row">&nbsp; &nbsp; &nbsp; <RenderDish dish={dish} />&nbsp; &nbsp; &nbsp; <RenderComments comments={dish.comments} />&nbsp; &nbsp; </div>&nbsp; ));export default DishDetail;

Answer 3

您传递道具并映射道具而不是访问它：<RenderComments comments={props.dish.comments} />// Not RenderComments(comments)function RenderComments(props) {&nbsp; ...&nbsp; props.comments.map(...)}