2017-06-09 4 views
0

Wenn die Komponente geladen wird, mache ich eine Ajax-Anfrage, die ein Objekt mit einem Array von Objekten zurückgibt.React.js - Kann die Eigenschaft 'map' von undefined nicht lesen

getPages() { 
    getAllPagesData().then((pages) => { 
    let data = pages 
    this.setState({ pages }); 
    }); 
} 

Innerhalb dieser Funktion kann ich effektiv auf die Daten zugreifen.

console.log(pages.pages[0].description)

Druckt die richtige Seitenbeschreibung.

In machen I-Zustand auf eine Variable habe die Einrichtung in meiner Rückkehr zuzugreifen:

render() { 

    const pages = this.state.pages.pages 
    console.log(pages) 

return (

Das in Chrom console.log ist:

(55) [Object, Object, Object, Object,... 

Ich versuche dann zu durchlaufen das Array mit Karte:

return (
    <div> 
    <Nav /> 
    { pages.map((post, index) => (

Es bricht die Seite und der Fehler ist: Cannot read property 'map' of undefined at Pages.render

Ich habe viele verschiedene Wege ausprobiert, um auf dieses Objekt und das darin enthaltene Array zuzugreifen, kann aber keine einzelnen Array-Elemente innerhalb der Renderfunktion anzeigen.

Antwort

0

Versuchen Sie, diese Zeile in dem Verfahren machen mit

const pages = this.state.pages.pages || [ ] 

Es ist sehr wahrscheinlich, weil die render Methode, bevor die vollständige Ajax-Request aufgerufen wird. So ist die this.state.pages.pages zunächst undefined.

+0

"Es ist wahrscheinlich, weil die Render-Methode aufgerufen wird, bevor die Ajax-Anfrage abgeschlossen ist" - ah, das scheint wahrscheinlich ... Yup, das hat funktioniert, danke! –

Verwandte Themen