Javascript “如何修复”；无法读取属性'；评论'；“未定义”的定义；反应

我正在从一个对象数组中提取数组“comments”，当我试图将该数组传递给函数时，我遇到了以下错误“无法读取未定义的属性“comments”

下面是我的代码片段

export const DISHES = [
  {
    id: 0,
    name: "Uthappizza",
    image: "assets/images/uthappizza.png",
    category: "mains",
    label: "Hot",
    price: "4.99",
    comments: [
      {
        id: 0,
        rating: 5,
        comment: "Imagine all the eatables, living in conFusion!",
        author: "John Lemon",
        date: "2012-10-16T17:57:28.556094Z"
      },
      {

在主类中，我成功地从数组中获得了正确的元素

import { DISHES } from "../shared/dishes";
class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dishes: DISHES,
      selectedDish: null
    };
  }

  onDishSelect(dishId) {
    this.setState({
      selectedDishId: dishId
    });
  }

  render() {
    return (

          <DishDetail
            dish={
              this.state.dishes.filter(
                dish => dish.id === this.state.selectedDishId
              )[0]
            }


    );
  }
}

从“./shared/disks”导入{disks}；
类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
菜：菜，
selectedDish:null
};
}
onDishSelect（dishId）{
这是我的国家({
selectedDishId:dishId
});
}
render（）{
返回(
dish.id==this.state.selectedDishId
)[0]
}
);
}
}

在这里，我试图解析“comments”，但我甚至无法将其传递给函数“renderComments”，但当我尝试传递“this.props.dish”时，它只能正常工作

class DishDetail extends Component {
  constructor(props) {
    super(props);
    this.renderComments = this.renderComments.bind(this);
  }

  renderComments(comments) {
   return (
    .....
    );
  }
  render() {
    return (
          <div className="col-12 col-md-5 m-1">
               /*here is the problem*/
            {this.renderComments(this.props.dish.comments)}
          </div>

    );
  }
}

类详细信息扩展组件{
建造师（道具）{
超级（道具）；
this.renderComments=this.renderComments.bind（this）；
}
renderComments（注释）{
返回(
.....
);
}
render（）{
返回(
/*问题就在这里*/
{this.renderComments（this.props.dish.comments）}
);
}
}

您需要设置默认道具和所需类型，因为您可以传递空数组

import PropTypes from 'prop-types';
   DishDetail.propTypes = {
      dish: PropTypes.object
   };
   DishDetail.defaultProps = {
    dish:   {
        id: 0,
        name: "Uthappizza",
        image: "assets/images/uthappizza.png",
        category: "mains",
        label: "Hot",
        price: "4.99",
        comments: [
          {
            id: 0,
            rating: 5,
            comment: "Imagine all the eatables, living in conFusion!",
            author: "John Lemon",
            date: "2012-10-16T17:57:28.556094Z"
          }
        ]
     }

---

出现该错误是因为

this.state.selectedDishId

是

未定义的

，因此

过滤器

找不到匹配项

您可以在进入renderComments函数之前添加检查，如下所示：

this.props.dish && this.renderComments(this.props.dish.comments)

组件代码

import React, { Component } from 'react';

class DishDetail extends Component {
  constructor(props) {
    super(props);
    this.renderComments = this.renderComments.bind(this);
  }

  renderComments(comments) {
       return comments.map((comment)=> {
         return(
           <p>
              {comment.comment}
           </p>
         )
       })
  }
  render() {
    return (
          <div className="col-12 col-md-5 m-1">
            {this.props.dish && this.renderComments(this.props.dish.comments)}
          </div>

    );
  }
}

export default DishDetail;

import React，{Component}来自'React'；
类细节扩展组件{
建造师（道具）{
超级（道具）；
this.renderComments=this.renderComments.bind（this）；
}
renderComments（注释）{
返回注释。映射（（注释）=>{
返回(

{comment.comment}

)
})
}
render（）{
返回(
{this.props.dish&&this.renderComments（this.props.dish.comments）}
);
}
}
导出默认细节；

这是一份完整的报告

参考：

---

您没有处理应该写入的空值

class DishDetail extends Component {
  constructor(props) {
    super(props);
    this.renderComments = this.renderComments.bind(this);
  }

  renderComments(comments) {
   return (
    .....
    );
  }
  render() {
if(this.props.dish!=null)
{
    return (
          <div className="col-12 col-md-5 m-1">
               /*here is the problem*/
            {this.renderComments(this.props.dish.comments)}
          </div>

    );
  }
else
{
<div></div>
}
}
}

类详细信息扩展组件{
建造师（道具）{
超级（道具）；
this.renderComments=this.renderComments.bind（this）；
}
renderComments（注释）{
返回(
.....
);
}
render（）{
if（this.props.dish！=null）
{
返回(
/*问题就在这里*/
{this.renderComments（this.props.dish.comments）}
);
}
其他的
{
}
}
}

您可以简单地执行此操作

<div className="col-12 col-md-5 m-1">
     <h4>Comments</h4>
     {this.renderComments(this.props.dish)}
</div>

评论
{this.renderComments（this.props.dish）}

然后

renderComments(dish) {
    if (dish != null) {
        const commentsList = dish.comments.map((comment) => {
            return (
                <div key={comment.id}>
                    <list className="list-unstyled" tag="list">
                        <li className="mb-2">{comment.comment}</li>
                        <li className="mb-5">-- {comment.author}, {this.dateConverter(comment.date)}</li>
                    </list>
                </div>
            );
        });
        return commentsList;
    }
    else {
        return (
            <div></div>
        )
    }
}

renderComments（dish）{
if（dish！=null）{
const commentsList=dish.comments.map（（comment）=>{
返回(
{comment.comment}
--{comment.author}，{this.dateConverter（comment.date）}
);
});
返回评论列表；
}
否则{
返回(
)
}
}

---

我遇到了同样的问题。尝试了这个，效果很好。

我想你应该去掉大括号。不可能，传递给DishDetails的这个dish周围有html，它只是数组中的一个对象，所以不需要将它设为dish[0]你说得对，我没有注意到，无论如何，你可以传递一个空对象，并且需要设置默认的道具，我更改了一个object的答案，您应该添加这样做解决问题的原因，而不仅仅是它解决了问题。