Question

一旦我解决了这个问题，我可能会自己解决问题，我在解析获取的Json时遇到了问题，我已经记录了结果，但忘记了如何进一步深入json，相信我需要引用密钥返回的数组但如果有人能指出我正确的方向，我会很感激。

我的目标是使用.map

遍历每个数组的.name

反应组件

// 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>
    )
  }
}

控制台日志：

[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

您可以映射数组并返回jsx，如下所示：

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

你可以试试这个：

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>)
    }
  }

React JS - 返回Fetched Json的回复

2 个答案: