Question

我有新的反应并试图绕过它。目前，我试图显示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字段都不是很有帮助。因此，您需要为密钥找到唯一的值。

使用map函数在react中迭代json文件

1 个答案: