Как исправить «Невозможно прочитать комментарии свойства неопределенного» в реакции

Я извлекаю «комментарии» массива из массива объектов, и когда я пытаюсь передать этот массив функции, я получаю эту ошибку «Не удается прочитать комментарии свойства неопределенного»

вот фрагмент моего кода.

export const DISHES = [
  {
    id: 0,
    name: "Uthappizza",
    image: "assets/images/uthappizza.png",
    category: "mains",
    label: "Hot",
    price: "4.99",
    comments: [
      {
        id: 0,
        rating: 5,
        comment: "Imagine all the eatables, living in conFusion!",
        author: "John Lemon",
        date: "2012-10-16T17:57:28.556094Z"
      },
      {

в основном классе мне удалось получить из массива БЛЮДА нужный элемент

import { DISHES } from "../shared/dishes";
class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dishes: DISHES,
      selectedDish: null
    };
  }

  onDishSelect(dishId) {
    this.setState({
      selectedDishId: dishId
    });
  }

  render() {
    return (

          <DishDetail
            dish = {
              this.state.dishes.filter(
                dish => dish.id === this.state.selectedDishId
              )[0]
            }


    );
  }
}

здесь я попытался разобрать «комментарии», но я не смог даже передать его функции «renderComments», но когда я пытаюсь передать «this.props.dish», он работает нормально

class DishDetail extends Component {
  constructor(props) {
    super(props);
    this.renderComments = this.renderComments.bind(this);
  }

  renderComments(comments) {
   return (
    .....
    );
  }
  render() {
    return (
          <div className = "col-12 col-md-5 m-1">
               /*here is the problem*/
            {this.renderComments(this.props.dish.comments)}
          </div>

    );
  }
}

Я думаю, вы должны удалить фигурные скобки.

— 07.04.2019 01:26

не может быть, вокруг этого есть html

— 07.04.2019 01:38

javascript reactjs

07.04.2019 01:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 099

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

вам нужно установить реквизиты по умолчанию и требуемые типы, потому что вы можете передать пустой массив

import PropTypes from 'prop-types';
   DishDetail.propTypes = {
      dish: PropTypes.object
   };
   DishDetail.defaultProps = {
    dish:   {
        id: 0,
        name: "Uthappizza",
        image: "assets/images/uthappizza.png",
        category: "mains",
        label: "Hot",
        price: "4.99",
        comments: [
          {
            id: 0,
            rating: 5,
            comment: "Imagine all the eatables, living in conFusion!",
            author: "John Lemon",
            date: "2012-10-16T17:57:28.556094Z"
          }
        ]
     }

блюдо, переданное в DishDetails, является всего лишь одним объектом из массива, поэтому нет необходимости делать его блюдо[0]

— 07.04.2019 02:09

вы правы, я не заметил, во всяком случае, вы можете передать пустой объект, и вам нужно установить дефолтные реквизиты, я изменил ответ для объекта

— 07.04.2019 02:21

07.04.2019 01:47

Ответ принят как подходящий

Вы получаете эту ошибку, потому что this.state.selectedDishId — это undefined, и поэтому filter не находит соответствия.

Вы можете добавить проверку перед использованием функции renderComments, как показано ниже:

this.props.dish && this.renderComments(this.props.dish.comments)

Код компонента

import React, { Component } from 'react';

class DishDetail extends Component {
  constructor(props) {
    super(props);
    this.renderComments = this.renderComments.bind(this);
  }

  renderComments(comments) {
       return comments.map((comment)=> {
         return(
           <p>
              {comment.comment}
           </p>
         )
       })
  }
  render() {
    return (
          <div className = "col-12 col-md-5 m-1">
            {this.props.dish && this.renderComments(this.props.dish.comments)}
          </div>

    );
  }
}

export default DishDetail;

вот полный стекблиц

Ссылка :

Фильтр массива в javascript

07.04.2019 02:24

вы не обрабатывали нулевое значение, которое вы должны написать

class DishDetail extends Component {
  constructor(props) {
    super(props);
    this.renderComments = this.renderComments.bind(this);
  }

  renderComments(comments) {
   return (
    .....
    );
  }
  render() {
if (this.props.dish!=null)
{
    return (
          <div className = "col-12 col-md-5 m-1">
               /*here is the problem*/
            {this.renderComments(this.props.dish.comments)}
          </div>

    );
  }
else
{
<div></div>
}
}
}

22.07.2020 14:34

вы можете просто сделать это,

<div className = "col-12 col-md-5 m-1">
     <h4>Comments</h4>
     {this.renderComments(this.props.dish)}
</div>

а потом

renderComments(dish) {
    if (dish != null) {
        const commentsList = dish.comments.map((comment) => {
            return (
                <div key = {comment.id}>
                    <list className = "list-unstyled" tag = "list">
                        <li className = "mb-2">{comment.comment}</li>
                        <li className = "mb-5">-- {comment.author}, {this.dateConverter(comment.date)}</li>
                    </list>
                </div>
            );
        });
        return commentsList;
    }
    else {
        return (
            <div></div>
        )
    }
}

Я столкнулся с той же проблемой. Попробовал это, и это сработало.

Вы должны добавить, почему это решает проблему, а не только то, что она решает проблему.

— 23.01.2021 18:58

23.01.2021 18:56