Karte mit ReactJS verwenden?

Question

Ich benutze reactjs, um ein PHP-Array zu treffen. Ich tue dies durch eine Abrufanforderung wie folgt:

componentDidMount() { 
    fetch("http://localhost:8001/testing", { 
    method: 'GET', 
    headers: { 
     'Access-Control-Allow-Origin':'*', 
     'Access-Control-Allow-Methods':"GET, POST, PUT, DELETE,OPTIONS", 
     'Content-Type': '"application/json' 
    } 
    }).then(response => { 
    response.json() 
    .then(data => { 
     console.log(data); 
     let legoParts = data.map((legoPart) => { 

     return (
      <div key={legoPart.id}> 
      {legoPart.name} 
      </div> 
     ); 

     }); 

     this.setState({legoParts: legoParts}) 
    }); 
    }).catch(function(err) { 
    console.log("i failed"); 
    }); 
} 

Jedoch habe ich Probleme habe, den Inhalt der Array/Objekte angezeigt werden. Beim ersten console.log (console.log (Daten)) sind die Ergebnisse wie folgt:

(2) [{…}, {…}] 
    0:{id: 1, piece: "tree", type: "garden"} 
    1: {id:2 piece:"hat" type: "clothes"} 
__proto__:Object 
length:2 
__proto__:Array(0) 

Aber ich kann nicht herausfinden, wie man tatsächlich nur für jedes Objekt die Werte anzuzeigen. Dankbar für jede Hilfe!

Answer 1

Die Objekte in Ihrem Array von Objekten enthalten die piece und type Schlüssel und nicht die name Schlüssel.

return (
    <div key={legoPart.id}> 
    <div>{legoPart.piece}</div> 
    <div>{legoPart.type}</div> 
    </div> 
); 

Dann auf "nur Anzeige" diese divs, kehrt this.state.legoParts in render Methode Ihrer Komponente.

Answer 2

Problem ist, dass Ihr Array-Element nicht "Name" Schlüssel enthält, deshalb sehen Sie leere divs. Sie Ergebnis erhalten, wenn Sie Ihren Tauchgang mit zum Beispiel ersetzen:

<div key={legoPart.id}> 
    {legoPart.type + " " + legoPart.piece} 
</div>