Question

我是React的新手。我正在构建一个应用，其中MainComponent是容器组件，MenuComponent和DishDetail是演示组件。

当我在浏览器中运行代码时，显示无法读取第{11行的MenuComponent中未定义的属性'map'。

我已经按照演讲中的指示检查并完成了该操作，但仍然遇到此问题。我在这里附加所有文件：

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;

MenuComponent：

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;

Answer 1

基本上是说this.props.dishes中的值是不确定的。

确保您要在下面导入的值是一个数组（并且有效）。

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

此外，您可以直接使用DISHES变量，而不是像这样将其存储到状态中：

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

无法读取MenuComponent中未定义的属性“ map”

1 个答案: