Javascript 显示错误-'；TypeError:无法读取属性'；评论'；空值'；

为什么render comments函数不呈现我的注释，此错误是什么意思？ 该组件被导入到菜单组件中，菜单组件被进一步导入到app.js。 菜单组件中导入了一个shared disks.js文件，我可以渲染菜肴，但无法渲染评论，为什么

下面是我的代码-

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

    class DishDetail extends Component {
       constructor(props) {
         super(props);

    }

     renderDish(dish){
         if(dish != null){
            return (
                <Card>
                    <CardImg width="100%" src={dish.image} alt={dish.category} />
                    <CardBody>
                        <CardTitle>{dish.name}</CardTitle>
                        <CardText>{dish.description}</CardText>
                    </CardBody>
                </Card>
            )
        }
       
         else {
             return (
                 <div></div>
             )
         }
    }

    renderComments(comments){
        if(comments == null){
            return(
                <div></div>
            );
        }

        const cmnt = comments.map((cmt) => {
            return(
                <li key={cmt.id}>
                    <p>{cmt.comment}</p>
                </li>
            )
        });

        return(
            <div className='col-12 col-md-5 m-1'>
              <h4> Comments </h4>
              <ul className='list-unstyled'>
                {cmnt}
              </ul>
            </div>
        )
    }

    render(){

        const dish = this.props.dish;

        const renderComment = this.renderComments(dish.comments);

        return(
            <div className="container">
                <div className="row">
                  <div className="col-12 col-md-5 m-1'">
                    {this.renderDish(dish)}
                  </div>
                   {renderComment}
                </div>
            </div>
        )
    }
};

export default DishDetail;

从“React”导入React，{Component}；
从“reactstrap”导入{Card，CardBody，CardMg，CardTitle，CardText}；
类细节扩展组件{
建造师（道具）{
超级（道具）；
}
renderDish（碟形）{
if（dish！=null）{
返回(
{dish.name}
{dish.description}
)
}
否则{
返回(
)
}
}
renderComments（注释）{
if（注释==null）{
返回(
);
}
const cmnt=comments.map（（cmt）=>{
返回(

{cmt.comment}


)
});
返回(
评论

{cmnt}

)
}
render（）{
const dish=this.props.dish；
const renderComment=this.renderComments（dish.comments）；
返回(
{这是伦德尔迪什（菜）}
{renderComment}
)
}
};
导出默认细节；

---

这意味着在某些情况下，

this.props.dish

为

null

。你忘了给它一个初始值吗？

你可以分解道具

const { dish } = this.props;

如果对象中不存在属性，则可以使用可选的chaining（）确保返回undefined，而不是返回错误

const renderComment = this.renderComments(dish?.comments);

现在，当注释未定义时，可以为renderComments指定默认参数

renderComments(comments = null){
        ....
    }

---

看起来你的

this.props.dish

是

null

你能分享一下

this.props.dish

中的值是什么样子吗。它是否包含一个键

comments

？它的初始值为null。由于

dish

为null，您实际上是在尝试访问

null.comments

，这显然是行不通的。如果它使用的是“正确”的编程语言，它将抛出一个

NullPointerException

。这应该可以解释为什么需要添加额外的条件来检查

dish

是否为

null

。至于可选链接，即

？。

，请不要滥用它。它很有效，谢谢！。当我把这个条件放在const dish=this.props.dish和const dish=this.props.dish console.log（dish）之后时，它也起作用；如果（dish==null）{return（）；}，那么尽管我们在renderDish（）函数中指定了条件，但为什么我们必须在渲染中设置条件呢？

renderComments(comments = null){
        ....
    }