javascript - TypeError：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;

这是我的 mainComponent 文件，以防万一：

  import React, { Component } from "react";
import { Navbar, NavbarBrand } from "reactstrap";
import { DISHES } from "../shared/dishes";
import Menu from "./menucomponent";
import DishDetails from "./dishdetail";

class Main extends Component {
  constructor(props) {
super(props);

this.state = {
  dishes: DISHES,
  selectedDish: null
};
  }

  onDishSelect(dishId) {
this.setState({
  selectedDish: dishId
});
  }

  render() {
return (
  <div>
    <Navbar dark color="primary">
      <div className="container">
        <NavbarBrand href="/"> Ristorante Con Fusion </NavbarBrand>{" "}
      </div>{" "}
    </Navbar>{" "}
    <Menu
      dishes={this.state.dishes}
      onClick={dishId => this.onDishSelect(dishId)}
    />
    <DishDetails
      dish={
        this.state.dishes.filter(
          dish => dish.id === this.state.selectedDish
        )[0]
      }
    />
  </div>
);
  }
}

export default Main;

标签： javascripthtmlreactjs

javascript - TypeError：comments.map 不是 React 中的函数

问题描述

解决方案

推荐阅读