如何在 ReactJS 中使用 Map 访问嵌套对象
2020-09-13
817
我对 React JS 还很陌生，我需要使用 React JS 中的 map 方法访问选定的嵌套对象。我需要如下图所示的输出。请有人帮我。
DishdetailComponent.js | 文件
import {
Card,
CardImg,
CardImgOverlay,
CardText,
CardBody,
CardTitle
} from 'reactstrap';
class DishDetail extends Component{
constructor(props){
super(props);
this.state = {
selectedDish: null
}
};
onDishSelect(dish){
this.setState({selectedDish: dish})
}
renderDish(dish) {
if (dish != null)
return(
<Card>
<CardImg top src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
);
else
return(
<div></div>
);
}
renderComments(dish){
if (dish != null)
return(
<Card key={dish.comments.id}
onClick={() => this.onDishSelect(dish)}>
<CardBody>
<CardTitle>Comments</CardTitle>
<CardText key={dish.comments.id}>{dish.comments.map((sup)=> sup.comment)}</CardText>
<CardText>{dish.comments.map((sup)=> sup.author)}</CardText>
</CardBody>
</Card>
);
else
return(
<div></div>
);
}
render() {
const menu = this.props.dishes.map((dish) => {
return (
<div className="col-12 col-md-5 m-1">
<Card key={dish.id}
onClick={() => this.onDishSelect(dish)}>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardImgOverlay>
<CardTitle>{dish.name}</CardTitle>
</CardImgOverlay>
</Card>
</div>
);
});
return (
<div className="container">
<div className="row">
{menu}
</div>
<div className="row">
<div className="col-12 col-md-5 m-1">
{this.renderDish(this.state.selectedDish)}
</div>
<div className="col-12 col-md-5 m-1">
{this.renderComments(this.state.selectedDish)}
</div>
</div>
</div>
);
}
}
export default DishDetail;
dishes.js | 文件
[
{
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"
},
{
id: 2,
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
id: 3,
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
id: 4,
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
] },
{
id: 1,
name:'Zucchipakoda',
image: 'assets/images/zucchipakoda.png',
category: 'appetizer',
label:'',
price:'1.99',
description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
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"
},
{
id: 2,
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
id: 3,
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
id: 4,
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
},
{
id: 2,
name:'Vadonut',
image: 'assets/images/vadonut.png',
category: 'appetizer',
label:'New',
price:'1.99',
description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
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"
},
{
id: 2,
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
id: 3,
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
id: 4,
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
},
{
id: 3,
name:'ElaiCheese Cake',
image: 'assets/images/elaicheesecake.png',
category: 'dessert',
label:'',
price:'2.99',
description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
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"
},
{
id: 2,
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
id: 3,
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
id: 4,
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
}
];
App.js |文件
import React, { Component } from 'react';
import './App.css';
import { Navbar, NavbarBrand } from 'reactstrap';
import Menu from './components/MenuComponent';
import DishDetail from './components/DishdetailComponent';
import { DISHES } from './shared/dishes';
class App extends Component {
constructor(props){
super(props);
this.state = {
dishes: DISHES
};
}
render(){
return(
<div>
<Navbar dark color="primary">
<div className="container">
<NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
</div>
</Navbar>
<DishDetail dishes={this.state.dishes}/>
{/* <Menu dishes={this.state.dishes} /> */}
</div>
);
}
}
export default App;
为了更好地理解，请参阅以下链接
https://noorzee.github.io/confusion/
1个回答
如果我正确理解了这个问题，你想显示每个产品的所有评论。
解释
考虑到评论是一个数组，你正确地假设你需要使用
map
。
map 在数组上调用并返回每个项目的回调结果。
我们知道每个评论看起来都像这样
{
id: 0,
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
}
这意味着我们需要返回类似于
<div className="comment">
<div>{comment.comment}</div>
<div>{comment.author}</div>
<div>{comment.date}</div>
</div>
现在让我们用
map
来做：
comments.map(function(comment) {
return (
<div className="comment">
<div>{comment.comment}</div>
<div>{comment.author}</div>
<div>{comment.date}</div>
</div>
)}
)
这将产生数组:
[
<div className="comment">
<div>{comment1.comment}</div>
<div>{comment1.author}</div>
<div>{comment1.date}</div>
</div>,
<div className="comment">
<div>{comment2.comment}</div>
<div>{comment2.author}</div>
<div>{comment2.date}</div>
</div>,
<div className="comment">
<div>{comment3.comment}</div>
<div>{comment3.author}</div>
<div>{comment3.date}</div>
</div>
...
]
Itamar
2020-09-13