1

在运行反应网页时,h1 first正在打印,但h1 second没有被打印
此外renderDishDetailrenderComments也没有被调用。
我是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;

4

2 回答 2

1

dishDetail是一个你没有调用它的函数。在带有参数的渲染中添加括号dish,它应该可以工作。

像这样

{dishDetail(dish)}

于 2020-07-18T06:13:40.907 回答
1

试试这个,它应该可以打电话。

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这是您遇到的一个 lint 错误,您已经定义了您在 RenderComments 中定义的注释变量,但没有在函数中的任何地方使用它(我最好的猜测是您打算返回它,一旦您这样做,错误应该消失了。)

reactstarp此外,反应中的所有组件都以大写字母开头,无论是功能组件还是类组件(如您在库中所见,即Card,CardImg等)

于 2020-07-18T06:34:01.063 回答