Проблема, связанная с вызовом функциональных компонентов в ReactJS

Question

На запустив реакцию веб - страница h1 первым печатаются, но h1 вторые не печатаются
Кроме тогоrenderDishDetail а также renderCommentsне вызываются.
Я новичок в ReactJS и изучал функциональные компоненты. Я преобразовал компонент своего класса в функциональный компонент, и с тех пор эта проблема возникает.
Показаны некоторые ошибки, и я не могу понять, почему переменные не используются.

Line 21:6: 'comments' is assigned a value but never used no-unused-vars
Line 44:8: 'dish' is assigned a value but never used no-unused-vars

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

function renderDishDetail(dish){
    console.log("render DishDetail called")
    return(
        <div className="col-12 col-md-5 m-1">
            <Card>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                    <CardTitle>{dish.name}</CardTitle>
                    <CardText>{dish.description}</CardText>
                </CardBody>
            </Card>  
        </div>
    );
}

function renderComments(dish){
    console.log("render comments called")
    var comments;
    if(dish==null){
            console.log("DishDetail if");   
            comments = null;
            return(
                <div></div>
            )
        }
        else{
            console.log("DishDetail");  
            comments = dish.comments.map((unit) =>{
                return(
                    <div>
                    <p>{unit.comment}</p>
                    <p>-- {unit.author} , {unit.date[0]}{unit.date[1]}{unit.date[2]}{unit.date[3]}{unit.date[4]}{unit.date[5]}{unit.date[6]}{unit.date[7]}{unit.date[8]}{unit.date[9]}</p>
                    </div>
                );
            })
        }
}


const DishDetail = (props) => {
    const dish = props.selectdish;
    console.log("dish detail main called")

    const dishDetail = (dish) => {
        return(
            <div className="row">
                <h1>h1 second</h1>
                <renderDishDetail dish={dish} />
                <renderComments dish={dish} />
            </div>
        );
    }

    return(
            <div className="container">

                <h1>h1 first</h1>
                {dishDetail}
            </div>          
        );
}

export default DishDetail;

Answer 1

dishDetailэто функция, которую вы ее не вызывали. Добавить скобки после в рендере с параметромdish и он должен работать.

Вот так

{dishDetail(dish)}

Answer 2

Попробуйте это, и он должен работать при вызове.

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

function RenderDishDetail(dish){
    console.log("render DishDetail called")
    return(
        <div className="col-12 col-md-5 m-1">
            <Card>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                    <CardTitle>{dish.name}</CardTitle>
                    <CardText>{dish.description}</CardText>
                </CardBody>
            </Card>  
        </div>
    );
}

function RenderComments(dish){
    console.log("render comments called")
    if(dish){
        console.log("DishDetail if");
            return(
                <div></div>
            )
        }
        else{
            console.log("DishDetail");  
        return <div>
            {dish.comments.map((unit) =>{
                return(
                    <div>
                    <p>{unit.comment}</p>
                    <p>-- {unit.author} , {unit.date[0]}{unit.date[1]}{unit.date[2]}{unit.date[3]}{unit.date[4]}{unit.date[5]}{unit.date[6]}{unit.date[7]}{unit.date[8]}{unit.date[9]}</p>
                    </div>
                )
            })}
            </div>
        }
}


const DishDetail = (props) => {
    const dish = props.selectdish;
    console.log("dish detail main called")
    return(
            <div className="container">
            <h1>h1 first < /h1>
                <div className="row">
                <h1>h1 second</h1>
                <RenderDishDetail dish={dish} />
                <RenderComments dish={dish} />
            </div>          
        );
}

export default DishDetail;

Line 21:6: 'comments' is assigned a value but never used no-unused-vars Line 44:8: 'dish' is assigned a value but never used no-unused-vars это ошибка линта, вы определили переменную комментария, которую вы определили в RenderComments, но не используете ее где-либо в функции (я предполагаю, что вы собираетесь вернуть ее, как только вы сделаете это, ошибка должна исчезнуть).

Также все компоненты в реакции начинаются с верхнего регистра, будь то функциональный компонент или компонент класса (как вы можете видеть в reactstarp библиотека а именно Card,CardImg, так далее)