无法访问 React 组件中 JavaScript 对象中的数组

Question

I want to access comments array in my DishDetail Component but the compiler is throwing me Uncaught error: comments is not defined.

 export const DISHES = [ { id: 0, name:'Uthappizza', image: 'assets/images/uthappizza.png', category: 'mains', label:'Hot', price:'4.99', description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', comments: [ { id: 0, rating: 5, comment: "Imagine all the eatables, living in conFusion!", author: "John Lemon", date: "2012-10-16T17:57:28.556094Z" }, { id: 1, rating: 4, comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", author: "Paul McVites", date: "2014-09-05T17:57:28.556094Z" },

Here is the code snippet for DishDetail Component. When I am running RenderComments component with props.dish.comments, the browser is throwing me an uncaught error: comments is not defined. I have consoled log and props.dish is grabbing me the information of a particular dish but by typing .comments is no accessing me to comments array.

 import React from 'react'; import { Card, CardImg, CardBody, CardText, CardTitle } from 'reactstrap'; function RenderComments({comments}) { if (comments == null) { return (<div></div>) } const cmnts = comments.map(comment => { return ( <li key={comment.id}> <p>{comment.comment}</p> <p>-- {comment.author}, &nbsp; {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: '2-digit' }).format(new Date(comment.date))} </p> </li> ) }) return ( <div className=''> <h4> Comments </h4> <ul className='list-unstyled'> {cmnts} </ul> </div> ) } function RenderDish({dish}) { if (dish != null) return( <div> <Card key={dish.id}> <CardImg width="100%" src={dish.image} alt={dish.name} /> <CardBody> <CardTitle>{dish.name}</CardTitle> <CardText>{dish.description}</CardText> </CardBody> </Card> </div> ); else return( <div></div> ); } const DishDetail = (props) => { return ( <div className="container"> <div className='row'> <div className="col-12 col-md-5 m-1"> <RenderDish dish={props.dish}/> </div> <div className="col-12 col-md-5 m-1"> <RenderComments comments={props.dish && props.dish.comments}/> {console.log(props.dish.comments)} </div> </div> </div> ) } export default DishDetail

Answer 1

You are passing an empty array. Just pass <RenderComments comments={props.dish}/> . And in your function RenderComments use const cmnts = comments.comments.map(comment => {