Question

我是新来的人。我想显示来自API的数据，但出现错误。这就是我的显示方式。谁能帮我该怎么称呼数据？检查我的代码https://codesandbox.io/s/cool-brown-y4cdq?file=/src/App.js

return (
<div>     
  <p>Dev Hooks App </p>
  <ul>
  {data.map(item =>(
    <li> {item.result.name}</li>
    ))}
  </ul>
</div>
 );

我的数据看起来像这样

{
"count": 82,
"next": "http://swapi.dev/api/people/?page=2",
"previous": null,
"results": [
    {
        "name": "Luke Skywalker",
        "height": "172",
        "mass": "77",
        "hair_color": "blond",
        "skin_color": "fair",
        "eye_color": "blue",
        "birth_year": "19BBY",
        "gender": "male",
        "homeworld": "",
        "films": [],
        "species": [],
        },
       ]
      }

Answer 1

结果本身就是一个数组，因此您需要给索引以获取每个值或上面的答案说明替换代替data.map的data.result.map和代替item.result.name的item.name。

Answer 2

使用data.results.map而不是data.map。还要替换item.result.name

Answer 3

不应该：

return (
<div>     
  <p>Dev Hooks App </p>
  <ul>
  {data.results.map(item =>(
    <li> {item.name}</li>
    ))}
  </ul>
</div> );

无法显示来自API的数据

3 个答案: