Rendern erfolgt, bevor die Komponente mealt API-Aufruf gestartet wird

Question

Hallo, ich habe Probleme mit async. Es scheint, dass das Rendern aufgerufen wird, bevor der API-Aufruf in der componentwillmount erfolgt

// Framework 
import React, { PureComponent } from "react"; 

// Components 
import Page from "../components/Page.jsx"; 
import Button from "../components/Button.jsx"; 

class Home extends PureComponent { 
    constructor(props) { 
    super(props); 
    this.state = { 
     order: null, 
     error: null 
    }; 
    } 

    componentWillMount() { 
    Meteor.call("orders.getLastOrder", (error, response) => { 
     if (error) { 
     this.setState(() => ({ error: error })); 
     console.log(error); 
     } else { 
     this.setState(() => ({ order: response })); 
     console.log(this.state.order[0].name); 
     } 
    }); 
    } 

    goBack =() => this.props.history.push("/shop"); 
    goCart =() => this.props.history.push("/cart"); 

    render() { 
    return (
     <Page pageTitle="Cart" history goBack={this.goBack} goCart={this.goCart}> 
     <div className="home-page"> 
      <div> 
      {this.state.order.map((item, i) => <div key={i}> {item.name} 
         {item.price} {item.quantity}</div>)} 
      </div> 
      <Button 
      onClick={() => { 
       this.props.history.push("/shop"); 
      }} 
      > 
      Go shopping 
      </Button> 
     </div> 
     </Page> 
    ); 
    } 
} 

export default Home; 

Ich habe Probleme beim Versuch, von meinem Zustand durch die Objekte in einer Schleife um herauszufinden, wie und zeigt sie in Reihen (Ich versuche, einen Wagen)

0:{name: "TEMPOR Top", price: 875.5, quantitiy: 6} 
1:{name: "CONSECTETUR Coat", price: 329.8, quantitiy: 3} 
_id:"6RNZustHwbKjQDCYa" 

Answer 1

Sie noch die zusätzlichen render bekommen zu schaffen, aber ich nehme an, Sie auf der .map() Funktion einen Fehler zu bekommen?

wenn Sie Ihren Konstruktor in diese ändern:

constructor(props) { 
    super(props); 
    this.state = { 
     order: [], 
     error: null 
    }; 
} 

Sie nicht den Fehler, weil Sie nicht .map auf ein Null-Objekt verwenden können, aber Sie es auf einem leeren Array verwenden können.