Блог

Я новичок в React . Я создаю приложение, в котором MainComponent является компонентом контейнера, а MenuComponent и DishDetail являются компонентами презентации.

Когда я запускаю код в браузере, он показывает, что не удается прочитать свойство ‘map’ для undefined в MenuComponent в строке 11.

Я проверил это и сделал в соответствии с инструкциями, приведенными в моей лекции, но все еще сталкиваюсь с этой проблемой. Я прикрепляю все файлы здесь :

MainComponent:

 import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import Menu from './MenuComponent';
import DishDetail from './DishdetailComponent';
import  { DISHES } from '../shared/dishes';

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)} />
        <DishDetail selectedDish={this.state.dishes.filter((dish) => dish.id === selectedDish(dishId))[0]} />
      </div>
    );
  }
}

export default Main;
  

МенюКомпонент :

 import React, { Component } from 'react';
// import { Media } from 'reactstrap';
import { Card, CardImg, CardImgOverlay, CardText, CardBody,CardTitle } from 'reactstrap';

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

   render() {
      const menu = this.props.dishes.map((dish) => {
         return(
            <div key={dish.id} className="col-12 col-md-5 m-1">
               {/* <Media tag="li">
                  <Media left middle>
                        <Media object src={dish.image} alt={dish.name} />
                  </Media>
                  <Media body className="ml-5">
                     <Media heading>{dish.name}</Media>
                     <p>{dish.description}</p>
                  </Media>
               </Media>  */}
               <Card key={dish.id} onClick={() => this.props.onDishSelect(dish.id)}>
                  <CardImg width="100%" src={dish.image} alt={dish.name} />
                  <CardImgOverlay>
                      <CardTitle>{dish.name}</CardTitle>
                  </CardImgOverlay>
                </Card>
            </div>
         );
      });
      

      return(
         <div className="container">
            <div className="row">
               {/* <Media list>
                  {menu}
               </Media> */}
               {menu}
            </div>
         </div>
      );
   }
}

export default Menu;

  

Это в основном говорит о том, что значение из this.props.dishes не определено.

Убедитесь, что значение, которое вы импортируете ниже, является массивом (и оно допустимо).

 import { DISHES } from '../shared/dishes';
  

Кроме того, вы можете использовать DISHES переменную напрямую вместо сохранения ее в состояние, например:

 <Menu dishes={DISHES} onClick={(dishId) => this.onDishSelect(dishId)} />