मैं सर्वर से डेटा ला रहा हूं और डेटा को सफलतापूर्वक प्राप्त कर रहा हूं जैसा कि आप स्क्रीनशॉट में देख सकते हैं, मैंने अपना कोड भी चेक किया है। जब मैं मैन्युअल रूप से डेटा लेता हूं तो मेरा कोड ठीक से काम कर रहा है, लेकिन मुझे नहीं पता कि मुझे यह त्रुटि क्यों मिल रही है:

लेखन त्रुटि: अपरिभाषित की संपत्ति 'मानचित्र' नहीं पढ़ सकता

enter image description here

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;  
2
Deepak Kumrawat 4 अगस्त 2019, 15:39

3 जवाब

सबसे बढ़िया उत्तर

सभी ऑर्डर में सामग्री नहीं होती है (ऑर्डर: -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>
);
4
Domino987 4 अगस्त 2019, 15:47

नक्शा ऐरे विधियों में से एक है और क्योंकि आप सरणी ऑब्जेक्ट (ऑर्डर) अपरिभाषित हैं, इस प्रकार की त्रुटि हुई। आप भी कई गलती करते हैं। मैं आदेश घटक को रिफैक्टरिंग करता हूं

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;
0
Hamid Pouladi 4 अगस्त 2019, 22:01

मुझे लगता है कि सामग्री के बिना एक आदेश है। मैपिंग से पहले जांच लें कि सामग्री मौजूद है या नहीं:

{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),
});
  1. कोड के इस हिस्से का कोई मतलब नहीं है। विशेष रूप से updatedOffers और [].concat(updatedOrders) नामकरण।
  2. आप ES6 में डिफॉल्ट मेथड डिक्लेरेशन के बजाय कंस्ट्रक्टर में componentDidMount को वैल्यू क्यों देते हैं? आप ES5 और ES6 को मिलाते हैं।
2
Łukasz Szcześniak 4 अगस्त 2019, 15:54