TypeError：无法读取未定义的属性“地图”，传递道具时出现问题

Question

我将道具从一个组件传递到位于另一个文件中的另一个组件。我已经在两个组件中正确地创建了构造函数，但是我仍然遇到这个错误，作为一个新手，我无法解决这个问题。我在谷歌和 StackOverflow 上搜索过，但没有得到任何满意的结果。 App.js 文件：-

import React, {Component} from 'react';
import Menu from './component/MenuComponent';
import {DISHES} from './shared/dishes';
import logo from './logo.svg';
import {Navbar,NavbarBrand, Container} from 'reactstrap';
import { render } from 'react-dom';

//eslint-disable-next-line
class App extends Component{
  constructor(props){
    super(props);
    this.state={
      dishes:DISHES
    }
  }
  render() {
    return(
      <div className='App'>
        <Navbar dark color ="primary">
          <div className="Container">
            <NavbarBrand href="#">Saurav Pandey</NavbarBrand>
          </div>
        </Navbar>
        <Menu dishes={this.state.dishes} />
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
import { Card, CardBody, CardText, CardTitle, CardImg, CardImgOverlay } from 'reactstrap';
class Menu extends Component {
  constructor(props){
    super(props);
    this.state={
      selectedDish:null
    }
    console.log('Menu component constructor is invoked');
  }

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

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

  render() {
    if(this.props.dishes) {
       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>
            <div className="row">
              <div className="col-10 md-2 mt-1">
                {this.renderDish(this.state.selectedDish)}
              </div>
            </div>
          </div>
        );
    } else {
      return(
        <div>
          not found
        </div>
      );
    }
  };
}

export default Menu;

其他渲染文件在单独的文件中正确创建。 菜肴是一个数组，它看起来像：-

 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"
            }
]

Answer 1

我发现您的 DISHES 结构不正确。

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"
            }
]

应该是这样的

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"
            }
       ]
   }
]

我肯定认为是导致问题的结构，您缺少一些括号。