Question

我一直在尝试解决此问题，但找不到任何解决方案。到这里，应用程序具有三个组件（1）App（2）Menu（3）DishDetail，并且该应用程序正在从餐具文件中获取数据，这些文件是从应用程序中的共享文件夹导入的零件。 App组件将状态传递给Menu，并且在菜单中，每件事都被完美呈现，并且当单击卡时，Menu还将数据发送到DishDetail，但问题是当我单击Menu中的一张图像卡时，带有描述的卡被完美呈现但注释部分未呈现，当我删除renderComments()函数中的if语句时，这给我TypeError：无法读取未定义错误的属性“ map”。我做错了什么？我在下面发布了代码。请帮助

应用组件

.....
import { DISHES } from "./shared/dishes";
import Menu from "./components/MenuComponent";
.....

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { dishes: DISHES };
  }

  render() {
    return (
      <div>
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
          </div>
        </Navbar>
        <Menu dishes={this.state.dishes} />
      </div>
    );
  }
}

export default App;

菜单组件

.......
import DishDetail from "./DishDetailComponent";

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = { selectedDish: null };
  }

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

  render() {
    const menu = this.props.dishes.map((dish) => {
      return (
        <div className="col-12 col-md-5 m-1">
          <Card key={dish.id} onClick={() => this.onDishSelect(dish)}>
            <CardImg width="100%" src={dish.image} alt={dish.name} />
            <CardImgOverlay>
              <CardTitle>{dish.name}</CardTitle>
            </CardImgOverlay>
          </Card>
        </div>
      );
    });

    return (
      <div className="container">
        <div className="row">{menu}</div>
        <DishDetail dish={this.state.selectedDish} />
      </div>
    );
  }
}

export default Menu;

DishDetail

import React, { Component } from "react";
import { Card, CardImg, CardText, CardBody, CardTitle } from "reactstrap";

class DishDetail extends Component {
  constructor(props) {
    super(props);
  }

  renderDish(dish) {
    if (dish != null) {
      return (
        <Card>
          <CardImg src={dish.image} alt={dish.name} />
          <CardBody>
            <CardTitle>{dish.name}</CardTitle>
            <CardText>{dish.description}</CardText>
          </CardBody>
        </Card>
      );
    } else {
      return <div></div>;
    }
  }

  renderComments(comments) {
    if (comments != null) {
      return comments.map((comment) => {
        return <div>{comment.comment}</div>;
      });
    } else {
      return <div></div>;
    }
  }

  render() {
    return (
      <div className="row">
        <div className="col-12 col-md-5 m-1">
          {this.renderDish(this.props.dish)}
        </div>
        <div className="col-12 col-md-5 m-1">
          {this.renderComments(this.props.comments)}
        </div>
      </div>
    );
  }
}

export default DishDetail;

数据文件

export const DISHES = [
  {
    id: 0,
    name: "Uthappizza",
    image: "assets/images/uthappizza.png",
    category: "mains",
    label: "Hot",
    price: "4.99",
    description:
      "A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.",
    comments: [
      {
        id: 0,
        rating: 5,
        comment: "Imagine all the eatables, living in conFusion!",
        author: "John Lemon",
        date: "2012-10-16T17:57:28.556094Z",
      },
      {
        id: 1,
        rating: 4,
        comment:
          "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
        author: "Paul McVites",
        date: "2014-09-05T17:57:28.556094Z",
      },
      {
        id: 2,
        rating: 3,
        comment: "Eat it, just eat it!",
        author: "Michael Jaikishan",
        date: "2015-02-13T17:57:28.556094Z",
      },
      {
        id: 3,
        rating: 4,
        comment: "Ultimate, Reaching for the stars!",
        author: "Ringo Starry",
        date: "2013-12-02T17:57:28.556094Z",
      },
      {
        id: 4,
        rating: 2,
        comment: "It's your birthday, we're gonna party!",
        author: "25 Cent",
        date: "2011-12-02T17:57:28.556094Z",
      },
    ],
  },
  {
    id: 1,
    name: "Zucchipakoda",
    image: "assets/images/zucchipakoda.png",
    category: "appetizer",
    label: "",
    price: "1.99",
    description:..............
...................
................}}

更新：我通过进行一些更改解决了该问题。

在“菜单”组件中：

// Old Code(Not working)
<DishDetail dish={this.state.selectedDish} />

//Replace with new code
<DishDetail selectedDish={this.state.selectedDish} />

在DishDetail组件中：

// Old Code(Not Working)
renderComments(comments) {
    if (comments != null) {
      return comments.map((comment) => {
        return <div>{comment.comment}</div>;
      });
    } else {
      return <div></div>;
    }
  }

  render() {
    return (
      <div className="row">
        <div className="col-12 col-md-5 m-1">
          {this.renderDish(this.props.dish)}
        </div>
        <div className="col-12 col-md-5 m-1">
          {this.renderComments(this.props.comments)}
        </div>
      </div>
    );
  }
  
//Replace with new code
renderComments(dish) {
    if (dish != null) {
      return dish.comments.map((com) => {
        return <div>{com.comment}</div>;
      });
    } else {
      return <div></div>;
    }
  }

  render() {
    return (
      <div className="row">
        <div className="col-12 col-md-5 m-1">
          {this.renderDish(this.props.selectedDish)}
        </div>
        <div className="col-12 col-md-5 m-1">
          {this.renderComments(this.props.selectedDish)}
        </div>
      </div>
    );
  }

Answer 1

为什么不直接使用DISHES

    const menu = DISHES.map((dish) => {
      return (
        <div className="col-12 col-md-5 m-1">
          <Card key={dish.id} onClick={() => this.onDishSelect(dish)}>
            <CardImg width="100%" src={dish.image} alt={dish.name} />
            <CardImgOverlay>
              <CardTitle>{dish.name}</CardTitle>
            </CardImgOverlay>
          </Card>
        </div>
      );
    });

评论对象未在反应中呈现|| TypeError：无法读取未定义的属性“地图”

1 个答案: