Javascript 与在ReactJS中调用功能组件相关的问题

运行react网页时，h1第一个正在打印，但h1第二个未打印
此外，未调用

renderDishDetail

和

renderComments

。
我是ReactJS新手，正在学习功能组件。我将类组件转换为功能组件，从那时起，这个问题就出现了。
这些是显示的一些错误，我无法理解为什么不使用变量

第21:6行：“注释”被分配了一个值，但从未使用过任何未使用的变量

第44:8行：“dish”分配了一个值，但从未使用过，没有未使用的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;

import React，{Component}来自'React'；
从“reactstrap”导入{Card，CardMg，CardTitle，CardBody，CardText}；
功能呈现细节（碟形）{
log（“调用渲染细节”）
返回(
{dish.name}
{dish.description}
);
}
功能呈现指令（碟形）{
log（“调用渲染注释”）
var评论；
if（dish==null）{
控制台日志（“详细信息如有”）；
注释=空；
返回(
)
}
否则{
控制台日志（“详细信息”）；
注释=dish.comments.map（（单位）=>{
返回(
{unit.comment}

--{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]}

);
})
}
}
const dishdestail=（道具）=>{
const dish=props.selectdish；
console.log（“调用主盘详细信息”）
const dishdestail=（dish）=>{
返回(
h1秒
);
}
返回(
h1优先
{dish详细信息}
);
}
导出默认细节；

dishdeail

是一个您尚未调用的函数。使用参数

dish

在渲染后添加括号，它应该可以工作

像这样

{dishDetail(dish)}

---

试试这个，打电话应该可以

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;

import React，{Component}来自'React'；
从“reactstrap”导入{Card，CardMg，CardTitle，CardBody，CardText}；
功能呈现细节（碟形）{
log（“调用渲染细节”）
返回(
{dish.name}
{dish.description}
);
}
功能呈现指令（碟形）{
log（“调用渲染注释”）
如果（盘）{
控制台日志（“详细信息如有”）；
返回(
)
}
否则{
控制台日志（“详细信息”）；
返回
{dish.comments.map（（单位）=>{
返回(
{unit.comment}

--{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]}

)
})}
}
}
const dishdestail=（道具）=>{
const dish=props.selectdish；
console.log（“调用主盘详细信息”）
返回(
h1优先
h1秒
);
}
导出默认细节；

第21:6行：'comments'被分配了一个值，但从未使用过未使用的变量第44:8行：'dish'被分配了一个值，但从未使用过未使用的变量

这是一个lint错误，您已定义了在RenderComments中定义的注释变量，但未在函数中的任何位置使用它（我的最佳猜测是，您打算返回它，一旦返回，错误就会消失。）

此外，react中的所有组件都以大写开头，无论是函数组件还是类组件（如您在

reactstarp

库中看到的，即

Card

，

CardImg

等）