[英]React js TypeError: Cannot read property 'map' of undefined
使用地图函数进行渲染时出现错误。 表明：
typeError 无法读取未定义的属性“地图”
这是我的所有组件文件：
菜单组件.js
import React, {Component} from 'react';
import { Card, CardImg, CardImgOverlay,
CardTitle } from 'reactstrap';
import DishDetail from './DishdetailComponent';
class Menu extends Component {
constructor(props) {
super(props);
}
renderDish(dish) {
if(dish != null){
return(
<DishDetail dish={dish}/>
);
}
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.props.onClick(dish.id)}>
<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>
);
}
}
export default Menu;
DishdetailComponent.js
import React , { Component } from 'react';
import { Card, CardBody, CardImg, CardText, CardTitle } from 'reactstrap';
class DishDetail extends Component{
constructor(props) {
super(props);
this.state = {
selectedDish: null
}
}
renderDish(dish){
if(dish != null){
return(
<Card>
<CardImg top width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
);
}
else{
return(
<div></div>
);
}
}
renderComments(comments){
if(comments != null){
return(
<div className="container">
<h4>Comments</h4>
{comments.map((comment) => {
let date = new Intl.DateTimeFormat('en-US', {
year:'numeric',
month: 'short',
day: '2-digit'
}).format(new Date(Date.parse(comment.date)))
return(
<ul className="list-unstyled" key={comment.id}>
<li className="comment">{comment.comment}</li>
<br/>
<li className="author">-- {comment.author}, {date}</li>
</ul>
);
})}
</div>
)
}
else{
return(
<div></div>
)
}
}
render(){
const selectedDish = this.props.dish;
return(
<div className="container">
<div className="row">
<div className="col-12 col-md-5 m-1">
{this.renderDish(selectedDish)}
</div>
<div className="col-12 col-md-5 m-1">
{this.renderComments(selectedDish.comments)}
</div>
</div>
</div>
)
}
}
export default DishDetail;
主组件.js
import React,{ Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import Menu from './MenuComponents';
import DishDetail from './DishdetailComponent'
import { DISHES } from '../shared/shareDishes.js';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES,
selectedDish: null
};
}
onDishSelect(dishId) {
this.setState({ selectedDish: dishId });
}
render() {
return (
<div>
<Navbar dark color="primary">
<div className="container">
<NavbarBrand href="/">Ristorante confusion</NavbarBrand>
</div>
</Navbar>
<Menu dishes = {this.state.dishes}
onClick={(dishId) => this.onDishSelect(dishId)} />
<DishDetail dish={this.state.dishes.filter((dish) => dish.id === this.state.selectedDish[0])}/>
</div>
);
}
}
export default Main;
这是 sharedDishes.js 文件
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"
},
{
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"
}
]
}
]
我使用 id 从另一个文件中的数组对象获取数据，并使用 map 函数对其进行迭代。 但是虽然渲染函数显示 TypeError 我已经检查过，但我找不到未定义的属性。 如何解决这个问题？
确保dishes和comments是truthy并且是一个Array ：
Array.isArray(this.props.dishes) && this.props.dishes.map(...)
Array.isArray(comments) && comments.map(...)
祝你好运...
在 Main.js 组件中初始化状态时，尝试将 selectedDish 值从 null 更改为 0。
this.state = {
dishes: DISHES,
selectedDish: 0
};
}
另外，将key={dish.id}从 Card 向上移动到包装 div
<div className="col-12 col-md-5 m-1" key={dish.id}>
在 DishDetail.js 组件中，下一部分是多余的（实际上是两个构造函数，目前在 Menu 和 DishDetail 中）
this.state = {
selectedDish: null
};
因为组件从 Main.js 组件接收 selectedDish 作为道具。
希望这会让你继续前进。
我建议坚持将文件命名为与组件相同的约定。 例如，对于类DishDetail DishDetail.js扩展......，Menu.js类菜单扩展...并创建组件在源目录文件夹- SRC /组件/那些组件文件。
祝一切顺利！
React JS Map TypeError：无法读取未定义的属性“地图”
[英]React JS Map TypeError: Cannot read property 'map' of undefined
react js-× TypeError：无法读取未定义的属性“映射”
[英]react js-× TypeError: Cannot read property 'map' of undefined
TypeError：无法读取 react.js 中未定义的属性“地图”
[英]TypeError: Cannot read property 'map' of undefined in react.js
React.js 错误：TypeError：无法读取未定义的属性“地图”
[英]React.js error :TypeError: Cannot read property 'map' of undefined
TypeError：无法读取React.js上未定义的属性'map'
[英]TypeError: Cannot read property 'map' of undefined on React.js
未捕获的类型错误：无法读取未定义的属性“地图”-React js
[英]Uncaught TypeError: Cannot read property 'map' of undefined - React js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.