Блог

При запуске моего кода react появляется следующая ошибка: ошибка типа: не удается прочитать ‘комментарии’ свойства undefined. Я пытаюсь устранить эту ошибку, но не могу этого сделать. Это потому, что я неправильно сопоставил свой массив или мне нужно добавить еще какой-то код? Пожалуйста, помогите!!!!!!! Это мой файл MainComponent:

 import React, { Component} from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import { DISHES } from '../shared/dishes';
import Menu from './menucomponent';
import DishDetails from './dishdetail'

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

export default Main;
  

Это мой файл DishDetail:

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

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

  render() {
    const como = this.props.dishes.comments.map((dish) => {
      return ( 
        <div className="container">
            <div key={dish.id}>
                <p>
                    {dish.comment} 
                    <br/> 
                    --{dish.author}, 
                    {
                        new Intl.DateTimeFormat('en-US', {
                            year: 'numeric',
                            month: 'short',
                            day: '2-digit'
                        }).format(new Date(Date.parse(dish.date)))
                    } 
                    <br/>
                </p> 
            </div> 
        </div>
      );
    });

    return ( 
         <div>
            <div className="row">
                <div className="col-12 col-md-5 m-1">
                    <Card>
                        <CardImg src={this.props.dish.image}
                                alt={this.props.dish.name}/> 
                        <CardBody>
                            <h3> {this.props.dish.name} </h3> 
                            <CardText>{this.props.dish.description}</CardText> 
                        </CardBody> 
                    </Card> 
                </div> 
                <div className="col-12 col-md-6">
                    <p> Comment </p> 
                    <Media list>{como}</Media> 
                </div> 
            </div> 
        </div>
    );
  }
}

export default DishDetail;
  

Я полагаю, что ваш объект dishes содержит массив комментариев

измените значение под строкой в первой строке вашего метода рендеринга

 const como = this.props.dishes amp;amp; this.props.dishes.comments.map((dish) => {
  

DishDetails ожидает dishes prop. Но в вашем основном компоненте вы предоставляете DishDetails dish prop.

Файл DishDetail:

 this.props.dishes.comments.map // here we are referencing 'dishes'
  

Основной файл:

 DishDetails dish = { // here we are referencing 'dish'
  this.state.dishes.filter((dish) => dish.id === this.state.selectedDish)[0]
}
/>
  

Использование Prop-типов React, Typescript или Flow может помочь вам избежать подобных орфографических ошибок в будущем. С PropTypes было бы проще всего начать на данный момент.

Вы вызываете dishes, в то время как вы должны вызывать dish

 this.props.dish.comments.map