Javascript TypeError:无法读取属性'；地图'；未定义的0.1

我遵循react.js上的教程，遇到了这个错误，我不知道这个错误背后的主要原因是什么

感谢所有为错误做出贡献的人：

TypeError:无法读取未定义的属性“map”

---

这个社区很棒

你正试图通过

道具进行迭代。领导者

是

未定义的

，它必须是数组。在您的场景中，似乎缺少一个属性，这就是导致此问题的原因

需要将

组件中的

领导者

传递给

道具

，如下所示：

<Route exact path="/aboutus" component={<About leaders={this.state.leaders} />} />

import React, { Component } from "react";
import Home from "./HomeComponent";
import Contact from "./ContactComponent";
import About from "./AboutComponent";
import Menu from "./MenuComponents";
import Dishdetail from "./DishdetailComponent";
import Header from "./HeaderComponent";
import Footer from "./FooterComponent";
import { Dishes } from "../shared/dishes";
import { Comments } from "../shared/comments";
import { Leaders } from "../shared/leaders";
import { Promotions } from "../shared/promotions";
import { Switch, Route, Redirect } from "react-router-dom";

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

    this.state = {
      dishes: Dishes,
      comments: Comments,
      promotions: Promotions,
      leaders: Leaders,
    };
  }

  render() {
    const HomePage = () => {
      return (
        <Home
          dish={this.state.dishes.filter((dish) => dish.featured)[0]}
          promo={this.state.promotions.filter((promo) => promo.featured)[0]}
          leader={this.state.leaders.filter((leader) => leader.featured)[0]}
        />
      );
    };

    const DishWithId = ({ match }) => {
      return (
        <Dishdetail
          dish={this.state.dishes.filter((dish) => dish.id === parseInt(match.params.dishId, 10))[0]}
          comments={this.state.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId, 10))[0]}
        />
      );
    };
    return (
      <div>
        <Header />
        <Switch>
          <Route path="/home" component={HomePage} />
          <Route exact path="/menu" component={() => <Menu dishes={this.state.dishes} />} />
          <Route path="/menu/:dishId" component={DishWithId} />
          <Route exact path="/contactus" component={Contact} />
          <Route exact path="/aboutus" component={About} />
          <Redirect to="/home" />
        </Switch>
        <Footer />
      </div>
    );
  }
}

export default Main;

export const Leaders = [
  {
    id: 0,
    name: "Peter Pan",
    image: "/assets/images/alberto.png",
    designation: "Chief Epicurious Officer",
    abbr: "CEO",
    featured: false,
    description:
      "Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America intending to give their children the best future. His mother's wizardry in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which The Frying Pan became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.",
  },
  {
    id: 1,
    name: "Dhanasekaran Witherspoon",
    image: "/assets/images/alberto.png",
    designation: "Chief Food Officer",
    abbr: "CFO",
    featured: false,
    description:
      "Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long-established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him a great appreciation for varieties of food sources. As he puts it in his own words, Everything that runs wins, and everything that stays, pay!",
  },
  {
    id: 2,
    name: "Agumbe Tang",
    image: "/assets/images/alberto.png",
    designation: "Chief Taste Officer",
    abbr: "CTO",
    featured: false,
    description:
      "Blessed with the most discerning gustatory sense, Agumbe, our CFO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, You click only if you survive my lick.",
  },
  {
    id: 3,
    name: "Alberto Somayya",
    image: "/assets/images/alberto.png",
    designation: "Executive Chef",
    abbr: "EC",
    featured: true,
    description:
      "Award-winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!",
  },
];

<Route exact path="/aboutus" component={<About leaders={this.state.leaders} />} />