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