TypeError：從服務器獲取數據時無法讀取未定義的屬性“ map”

Question

我正在從服務器中獲取數據並成功獲取數據，如屏幕截圖所示，我還檢查了我的代碼。 當我手動獲取數據時，我的代碼可以正常工作，但是我不知道為什么會收到此錯誤：

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;  

Answer 1

並非所有訂單都具有成分（訂單：-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>
);

Answer 2

我想有一個沒有配料的訂單。 只需在映射之前檢查成分是否存在：

{Array.isArray(order.ingredients) && order.ingredients.map(ingredient =>
  <span key={Math.random()} className={classes.ingredients}>{ingredient.name} ({ingredient.qty}) </span>
)}

順便說一句，您的代碼包含兩個問題：

1. 請勿將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),
});

2. 這部分代碼沒有意義。 特別是命名updatedOffers和[].concat(updatedOrders) 。
3. 為什么要在構造函數中為componentDidMount分配一個值，而不是在ES6中為默認方法聲明呢？ 您混合使用ES5和ES6。

Answer 3

map是Array方法之一，由於您未定義數組對象（訂單），因此發生了這種類型的錯誤。 你也會犯幾個錯誤。 我重構訂單組件

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;