TypeError:从服务器获取数据时，无法读取未定义的属性“”map“”
TypeError:从服务器获取数据时，无法读取未定义的属性“”map“”
提问于 2019-08-04 20:39:44
我正在从服务器获取数据并成功获取数据，正如您在屏幕截图中看到的那样，我还检查了我的代码。当我手动获取数据时，我的代码工作正常，但我不知道为什么会出现这个错误：
TypeError:无法读取未定义的属性'map‘
Orders.js文件：
import React, { Component } from 'react';
import Toolbar from '../../components/Navigation/Toolbar/Toolbar';
import Order from '../../components/Order/Order';
import axios from 'axios';
class Orders extends Component {
constructor(){
super();
this.state={
orders:[]
}
this.componentDidMount=(event) =>{
axios.get('https://reactjs-burger-builder-2607.firebaseio.com/orders.json')
.then(response =>{
console.log(response.data)
let updatedOrders=[];
for(let key in response.data)
{
updatedOrders.push(response.data[key]);
}
this.setState({
orders:[].concat(updatedOrders),
});
})
}
}
render() {
console.log(this.state.orders);
let allOrders='loading..';
if(this.state.orders){
allOrders= <Order orders={this.state.orders}/>
}
return (
<div>
<Toolbar/>
{allOrders}
</div>
);
}
}
export default Orders;Order.js文件
import React from 'react';
import classes from './Order.css';
const Order =(props) =>{
console.log(props.orders);
return(
<div>
{props.orders.map(order =>
<div className={classes.order} key={Math.random()}>
<span>name: {order.name} </span><br/>
<span>contact: {order.contact} </span><br/>
<span>address: {order.address} </span><br/>
<span>Price: {order.price} Rs </span><br/>
<p><span>ingredients: </span>
{order.ingredients.map(ingredient =>
<span key={Math.random()} className={classes.ingredients}>{ingredient.name} ({ingredient.qty}) </span>
)}
</p>
</div>
)}
</div>
);
}
export default Order; 回答 3
Stack Overflow用户
回答已采纳
发布于 2019-08-04 20:47:32
并非所有订单都有配料(订单：-LlR57Tm3bO2xX31ywFq)。这就是为什么它对于某些订单是失败的。你得先确认一下订单里有没有配料。
return(
<div>
{props.orders.map(order =>
<div className={classes.order} key={Math.random()}>
<span>name: {order.name} </span><br/>
<span>contact: {order.contact} </span><br/>
<span>address: {order.address} </span><br/>
<span>Price: {order.price} Rs </span><br/>
<p><span>ingredients: </span>
{order.ingredients ? order.ingredients.map(ingredient =>
<span key={Math.random()} className={classes.ingredients}>{ingredient.name} ({ingredient.qty}) </span>
) : 'No ingredients'}
</p>
</div>
)}
</div>
);Stack Overflow用户
发布于 2019-08-04 20:54:13
我想是没有配料的订单吧。只需在映射之前检查是否有配料：
{Array.isArray(order.ingredients) && order.ingredients.map(ingredient =>
<span key={Math.random()} className={classes.ingredients}>{ingredient.name} ({ingredient.qty}) </span>
)}顺便说一下，您的代码包含两个问题：
- 不要使用
Math.random()作为列表元素的键，这是对键元素最糟糕的输入(最好不要使用键)。请参阅https://reactjs.org/docs/lists-and-keys.html
let updatedOrders=[];
for(let key in response.data)
{
updatedOrders.push(response.data[key]);
}
this.setState({
orders:[].concat(updatedOrders),
});- 这部分代码毫无意义。特别是在命名
updatedOffers和[].concat(updatedOrders). - Why时，您是否在构造函数中为
componentDidMount赋值，而不是在ES6中为默认方法声明赋值？你把ES5和ES6混在一起。
Stack Overflow用户
发布于 2019-08-04 21:32:04
map是Array方法之一，因为您的数组对象(Orders)是未定义的，所以发生了此类型错误。你也犯了几个错误。I重构订单组件
import React, { Component } from "react";
import Toolbar from "../../components/Navigation/Toolbar/Toolbar";
import Order from "../../components/Order/Order";
import axios from "axios";
class Orders extends Component {
constructor() {
super();
this.state = {
orders: []
};
this.getData = this.getData.bind(this);
}
getData() {
return axios
.get("https://reactjs-burger-builder-2607.firebaseio.com/orders.json")
.then(response => {
this.setState({
orders: response.data
});
})
.catch(err => console.error(err));
}
//this lifecycle method called when component mount
componentDidMount() {
this.getData();
}
render() {
console.log(this.state.orders);
const RenderOrders = () => {
if (this.state.orders.length) {
return <Orders orders={this.state.orders} />;
} else {
return <p>...loading</p>;
}
};
return (
<div>
<Toolbar />
<RenderOrders />
</div>
);
}
}
export default Orders;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57346627
复制相关文章
相似问题