Блог

Я пытаюсь создать приложение с помощью react, но я получил сообщение об ошибке «не удается прочитать свойство ‘image’ неопределенного»

Пожалуйста, помогите мне, если вы обнаружили какую-либо проблему, потому что я новичок в этой среде.

Появляется ошибка

 function RenderCard({ item }) {
   5 |   return (
   6 |     <Card>
>  7 |       <CardImg src={item.image} alt={item.name} />
   8 |       <CardBody>
   9 |         <CardTitle>{item.name}</CardTitle>
  10 |         {item.designation ? <CardSubtitle>{item.designation}</CardSubtitle> : null}
  

Полный код

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

function RenderCard({ item }) {
  return (
    <Card>
      <CardImg src={item.image} alt={item.name} />
      <CardBody>
        <CardTitle>{item.name}</CardTitle>
        {item.designation ? <CardSubtitle>{item.designation}</CardSubtitle> : null}
        <CardText>{item.description}</CardText>
      </CardBody>
    </Card>
  );
}

function Home(props) {
  return (
    <div className="container">
      <div className="row align-items-start">
        <div className="col-12 col-md m-1">
          <RenderCard item={props.dish} />
        </div>
        <div className="col-12 col-md m-1">
          <RenderCard item={props.promotion} />
        </div>
        <div className="col-12 col-md m-1">
          <RenderCard item={props.leader} />
        </div>
      </div>
    </div>
  );
}

export default Home;

  

И я импортирую его из другого файла

Насколько я понимаю, при импорте файла должна быть проблема

 import React, { Component } from "react";
import Home from "./HomeComponent";
import Contact from "./ContactComponent";
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} />
          <Redirect to="/home" />
        </Switch>
        <Footer />
      </div>
    );
  }
}

export default Main;

  

Спасибо

Вы передаете promo prop Home компоненту:

 <Home promo={...} />
  

Но в Home компоненте вы используете using props.promotion , undefined когда это должно быть props.promo :

 // don't use props.promotion, use props.promo instead
<RenderCard item={props.promo} />