在react中使用map函数遍历json文件答案

【问题标题】：Iterating through a json file using map function in react在react中使用map函数遍历json文件
【发布时间】：2018-05-19 16:36:03
【问题描述】：

我刚开始做出反应并试图绕开它。目前，我正在尝试显示来自 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 对象，返回并呈现每个用户的所有电子邮件和用户名（在登录下）的列表。

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

【问题讨论】：

标签： javascript json reactjs jsx

【解决方案1】：

这是相当标准的，如果这是你第一次使用 React，你应该阅读 docs 并且可能会阅读教程（这可能是你投反对票的原因......）

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

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

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

【讨论】：