Компоненты React не отображаются в браузере, но не показывают ошибок

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render( <
  React.StrictMode >
  <
  App / >
  <
  /React.StrictMode>,
  document.getElementById('root')
);

Я новичок в React. Использование реакции 17.0.2. Есть 3 компонента: 1) MainComponent.js, 2) MenuComponent.js и 3) DishDetailComponent.js. MainComponent является родителем. Результат должен показать меню изображений блюд в строках, отображаемых MenuComponent. DishDetailComponent должен отображать детали блюда и комментарии. К сожалению, «npm start» не показывает никаких ошибок.

MenuComponent.js

import React, { Component } from 'react';
import {Card,CardImg,CardImgOverlay,CardTitle} from 'reactstrap'

class Menu extends Component {

    render() {
      console.warn(this.props.dishes)
      const menu = this.props.dishes.map((dish) => {
        console.warn(dish.id)
        return (
          <div key = {dish.id} className = "col-12 col-md-5 m-1">
            <Card onClick = {() => this.props.onClick(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">
                {menu}         
            </div>

        </div>
      );
      
    }
}

export default Menu;

**DishDetailComponent.js**


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

class DishDetail extends Component {
  
    renderDish(dish) {
      if (dish != null)
          return(
              <Card>
                  <CardImg top src = {dish.image} alt = {dish.name} />
                  <CardBody>
                    <CardTitle>{dish.name}</CardTitle>
                    <CardText>{dish.description}</CardText>
                  </CardBody>
              </Card>

          );
      else
          return(
              <div></div>
          );
    }

    renderComments(dish) {
      if (dish != null) {
        const commentsList = dish.comments.map((Comment) => {
          return (
            <div key = {Comment.id}>
              <List type = "unstyled">
                  <li>{Comment.comment}</li>
                  <li>-- {Comment.author} {Comment.date}</li>
                    
              </List>
            </div>
          );
        });

      return (
        <div>
          <h4>Comments</h4>
          {commentsList}
        </div>
        );
      } else {
          return <div></div>
      }
    }
    
    render() {
      return (
        <div className = "container">
            <div className = "row">
              <div className = "col-12 col-md-5 m-1">
                  {this.renderDish(this.state.selectedDish)}
              </div>
              <div className = "col-12 col-md-5 m-1">
                  {this.renderComments(this.state.selectedDish)} 
              </div>   
            </div>
        </div>     
      );

    } 

  }

export default DishDetail;

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

export default Main;

**dishes.js**


export const DISHES =
    [
        {
        id: 0,
        name:'Uthappizza',
        image: 'assets/images/uthappizza.png',
        category: 'mains',
        label:'Hot',
        price:'4.99',
        description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
        comments: [
            {
            id: 0,
            rating: 5,
            comment: "Imagine all the eatables, living in conFusion!",
            author: "John Lemon",
            date: "2012-10-16T17:57:28.556094Z"
            },
            {
            id: 1,
            rating: 4,
            comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
            author: "Paul McVites",
            date: "2014-09-05T17:57:28.556094Z"
            },
            {
            id: 2,
            rating: 3,
            comment: "Eat it, just eat it!",
            author: "Michael Jaikishan",
            date: "2015-02-13T17:57:28.556094Z"
            },
            {
            id: 3,
            rating: 4,
            comment: "Ultimate, Reaching for the stars!",
            author: "Ringo Starry",
            date: "2013-12-02T17:57:28.556094Z"
            },
            {
            id: 4,
            rating: 2,
            comment: "It's your birthday, we're gonna party!",
            author: "25 Cent",
            date: "2011-12-02T17:57:28.556094Z"
            }
        ]                        },
        {
        id: 1,
        name:'Zucchipakoda',
        image: 'assets/images/zucchipakoda.png',
        category: 'appetizer',
        label:'',
        price:'1.99',
        description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
        comments: [
            {
            id: 0,
            rating: 5,
            comment: "Imagine all the eatables, living in conFusion!",
            author: "John Lemon",
            date: "2012-10-16T17:57:28.556094Z"
            },
            {
            id: 1,
            rating: 4,
            comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
            author: "Paul McVites",
            date: "2014-09-05T17:57:28.556094Z"
            },
            {
            id: 2,
            rating: 3,
            comment: "Eat it, just eat it!",
            author: "Michael Jaikishan",
            date: "2015-02-13T17:57:28.556094Z"
            },
            {
            id: 3,
            rating: 4,
            comment: "Ultimate, Reaching for the stars!",
            author: "Ringo Starry",
            date: "2013-12-02T17:57:28.556094Z"
            },
            {
            id: 4,
            rating: 2,
            comment: "It's your birthday, we're gonna party!",
            author: "25 Cent",
            date: "2011-12-02T17:57:28.556094Z"
            }
        ]
        },
        {
        id: 2,
        name:'Vadonut',
        image: 'assets/images/vadonut.png',
        category: 'appetizer',
        label:'New',
        price:'1.99',
        description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
        comments: [
            {
            id: 0,
            rating: 5,
            comment: "Imagine all the eatables, living in conFusion!",
            author: "John Lemon",
            date: "2012-10-16T17:57:28.556094Z"
            },
            {
            id: 1,
            rating: 4,
            comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
            author: "Paul McVites",
            date: "2014-09-05T17:57:28.556094Z"
            },
            {
            id: 2,
            rating: 3,
            comment: "Eat it, just eat it!",
            author: "Michael Jaikishan",
            date: "2015-02-13T17:57:28.556094Z"
            },
            {
            id: 3,
            rating: 4,
            comment: "Ultimate, Reaching for the stars!",
            author: "Ringo Starry",
            date: "2013-12-02T17:57:28.556094Z"
            },
            {
            id: 4,
            rating: 2,
            comment: "It's your birthday, we're gonna party!",
            author: "25 Cent",
            date: "2011-12-02T17:57:28.556094Z"
            }
        ]
        },
        {
        id: 3,
        name:'ElaiCheese Cake',
        image: 'assets/images/elaicheesecake.png',
        category: 'dessert',
        label:'',
        price:'2.99',
        description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
        comments: [
            {
            id: 0,
            rating: 5,
            comment: "Imagine all the eatables, living in conFusion!",
            author: "John Lemon",
            date: "2012-10-16T17:57:28.556094Z"
            },
            {
            id: 1,
            rating: 4,
            comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
            author: "Paul McVites",
            date: "2014-09-05T17:57:28.556094Z"
            },
            {
            id: 2,
            rating: 3,
            comment: "Eat it, just eat it!",
            author: "Michael Jaikishan",
            date: "2015-02-13T17:57:28.556094Z"
            },
            {
            id: 3,
            rating: 4,
            comment: "Ultimate, Reaching for the stars!",
            author: "Ringo Starry",
            date: "2013-12-02T17:57:28.556094Z"
            },
            {
            id: 4,
            rating: 2,
            comment: "It's your birthday, we're gonna party!",
            author: "25 Cent",
            date: "2011-12-02T17:57:28.556094Z"
            }
        ]
        }
    ];

reactjs

06.05.2022 02:14

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

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

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

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

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

Ответы 2

Убедитесь, что у вас есть файл index.js.

В index.js импортируйте реакцию, ReactDOM и ваш основной компонент следующим образом:

import React from 'react';
import ReactDOM from 'react-dom';
import Main from 'path/to/component';

затем ниже отрисуйте свой основной компонент с помощью ReactDOM: (это изменилось для React v18):

ReactDOM.render(<Main />, document.querySelector('#root');

Забыл упомянуть, что есть index.js. Я отредактирую вопрос, чтобы добавить этот файл. Так что @William Nicholson проблема все еще существует. Спасибо.

— 06.05.2022 10:59

06.05.2022 02:26

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

Исправление проблемы — эти две строки в DishDetailComponent.js в части render(). Вместо «состояния» я использовал «реквизит», а вместо «выбранного блюда» использовал «блюдо». Это связано с тем, что родительский компонент MainComponent.js использует состояние и свойства. Пожалуйста, ознакомьтесь с изменениями ниже.

'''

{this.renderDish(this.props.dish)}

...

{this.renderComments (this.props.dish)}

'''

09.05.2022 23:31