React JS - Antwort von Fetched Json zurück

Question

Wahrscheinlich werde ich mich selbst treten, sobald ich dies ausarbeiten, ich habe Probleme beim Parsen von geholten Json, ich habe so weit wie die Ergebnisse protokolliert, aber vergessen, weiter in den JSON zu bohren Ich glaube, ich muss auf die Schlüssel der zurückgegebenen Arrays verweisen, würde mich aber freuen, wenn mir jemand in die richtige Richtung zeigen könnte.

Mein Ziel ist es Schleife durch die .name jedes Array

Reagieren Component

// Uses react-fetch to retrive json from swapi 
class Api extends React.Component{ 
    render(){ 
    return (
     <Fetch url="http://swapi.co/api/people/"> 
     <ApiResponse /> 
     </Fetch> 
    ) 
    } 
} 

// Return results, having trouble digging further that .results (see Json below) 
class ApiResponse extends React.Component{ 
    render(){ 
    console.log(this.props.results) 
    return (
     <div> 
      <h1 classType="character-name">{this.props.results/*This is where im stuck*/}</h1> 
     </div> 
    ) 
    } 
} 

Console log .map mit:

[Object, Object] 
0:Object 
    gender:"male" 
    height:"172" 
    homeworld:"http://swapi.co/api/planets/1/" 
    name:"Luke Skywalker" 
    __proto__:Object 
0:Object 
    gender:"male" 
    height:"172" 
    homeworld:"http://swapi.co/api/planets/1/" 
    name:"Han Solo" 
    __proto__:Object 
length:2 
__proto__ 
:Array[0] 

Answer 1

Sie das Array abbildet und zurück jsx wie folgt:

return (
    <ul> 
    {this.props.results.map((user) => 
     <li key={user.name}> 
     <h1 classType="character-name">{user.name}</h1> 
     <p>{user.height}</p> 
     </li> 
    )} 
    </ul> 
); 

Answer 2

Sie können dies versuchen:

render: function(){ 
    if (this.props.results) { 
     return (
     {this.props.results.map(function(obj, index){ 
      return (
       <div key={index}> 
       <h1 className="character-name">{obj.name}</h1> 
       </div> 
      ); 
     })} 
    ) 
    } else { 
     return (<div></div>) 
    } 
    }