javascript - 在 react 中使用 map 函数遍历 json 文件

Question

我刚开始使用react并试图全神贯注。目前，我正在尝试显示一个 json 文件中的电子邮件和用户名列表，如下所示:

    {  
"results":[  
  {  
     "gender":"female",
     "name":{  
        "title":"mrs",
        "first":"maïssae",
        "last":"hummel"
     },
     "location":{  
        "street":"7387 burgemeester reigerstraat",
        "city":"opsterland",
        "state":"utrecht",
        "postcode":49157
     },
     "email":"maïssae.hummel@example.com",
     "login":{  
        "username":"bigladybug314",
        "password":"news",
        "salt":"4rnXJ7rr",
        "md5":"36c340d3a1f14b04ead5fa45899fa6d8",
        "sha1":"9303a71d951971500d8e01aa69bfb6b18a9c14ee",
        "sha256":"cad8fbc826f9add00262cd2e5850dc985b3da37a83d2603e14a700322738729a"
     },
     "dob":"1967-10-07 16:49:29",
     "registered":"2007-09-30 12:00:20",
     "phone":"(830)-232-0383",
     "cell":"(465)-588-8299",
     "id":{  
        "name":"BSN",
        "value":"48491274"
     },
     "picture":{  
        "large":"https://randomuser.me/api/portraits/women/12.jpg",
        "medium":"https://randomuser.me/api/portraits/med/women/12.jpg",
        "thumbnail":"https://randomuser.me/api/portraits/thumb/women/12.jpg"
     },
     "nat":"NL"
  },
  ...

此 json 文件是来自 randomuser api ( https://randomuser.me/api/?results=10) 的响应。我想遍历 json 对象，返回并呈现每个用户的所有电子邮件和用户名(在登录下)的列表。

在此先感谢您的帮助。此外，将不胜感激有关映射的任何其他有用信息。

Answer 1

这是非常标准的，您应该阅读 docs如果这是您第一次使用 React，可能会完成本教程

无论如何，你有一个结果列表，你可以像这样映射它们:

<ul>
  {results.map(user => <li key={user.id}>{user.login.username} - {user.login.email}</li>)}
</ul>

我不知道 randomuser.me 是关于什么的，但似乎每个结果的 id 字段都不是很有用。因此，您需要为 key 找到一个唯一值。