console.log druckt zweimal und Karte funktioniert nicht in reactjs/mobx Projekt

Question

Ich habe die unten Abrufanforderung in meinem Mobx Speicher:

getAllLegoParts = action("get all lego",() => { 
this.legoParts = fromPromise(
    fetch("http://localhost:8000/LegoPieces", { 
    method: "GET", 
    cache: "no-store" 
    }).then(response => response.json()) 
); 
}); 
} 

ich dies in der unten ReactJS Klasse bin mit:

class ViewLegos extends Component { 
constructor(props) { 
super(props); 
this.props.store.getAllLegoParts(); 
} 

render() { 
console.log(this.props.store.legoParts.value); 
return (
    <div> 
    <table> 
     <thead> 
     <tr> 
      <th>Piece</th> 
      <th>Type</th> 
     </tr> 
     </thead> 
     <tbody> 
     {this.props.store.legoParts.map(legoPart => (
      <tr key={legoPart.id}> 
      <td>{legoPart.piece}</td> 
      <td>{legoPart.piece}</td> 
      <td>{legoPart.type}</td> 
      </tr> 
     ))} 
     </tbody> 
    </table> 
    </div> 
); 
} 
} 

export default inject("store")(observer(ViewLegos)); 

Allerdings habe ich zwei Fragen:

1. console.log druckt zweimal - in einem Fall in druckt nicht definiert, in der zweiten Es druckt ein Array von Objekten (was ich will).

2. Ich erhalte eine Fehlermeldung, dass:

   TypeError: this.props.store.legoParts.map is not a function 
   

dankbar für Ihre Hilfe!

Answer 1

Kann man warten, bis die Komponente gemountet ist, bevor die Anzeigedaten abgerufen werden? Hier einig Pseudo-Code, die helfen können:

class ViewLegos extends Component { 

    componentDidMount() { fetchLegos() } 

    render() { 
    const allowRender = this.props.store.legoParts && this.props.store.legoParts.length 

    if (allowRender) { 
     // display lego data 
    } 

    return null 
    } 

} 

In diesem Beispiel, wir warten auf das Bauteil zu montieren, holt die Daten und es nur angezeigt wird, wenn es vorhanden ist.

Wenn Sie Ihren Code durchsehen, sieht es so aus, als müssten Sie nur defensiver sein und die Komponentenanzeige handhaben, wenn noch keine legoParts definiert sind. Sie werden am Anfang nicht definiert, da Ihr Async-Abruf nicht vor dem Rendern abgeschlossen wird.