反応のマップ関数を使用してjsonファイルを反復する

Question

私は反応して、その周りを頭で覆そうとしています。このJSONファイルがrandomuserのAPI（https://randomuser.me/api/?results=10）からの応答である

{ 
"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ファイルから電子メールやユーザ名のリストを表示しようとしています。 jsonオブジェクトを繰り返し処理し、各ユーザーのすべての電子メールとユーザー名（ログイン中）のリストを返してレンダリングします。

ご協力いただきありがとうございます。また、マッピングに関するその他の有益な情報があれば幸いです。

Answer 1

これはかなり標準であり、これは、とにかく

（あなたがするダウンの投票...を得た理由はおそらくです）あなたに反応して、あなたの最初の時間であれば、あなたはdocsを読んで、おそらくチュートリアルを経る必要があります結果のリストを持っていて、このようにそれらの上にマッピングします。

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

私はrandomuser.meが何であるか知らないが、それはそれぞれの結果から、IDフィールドは非常に有用ではないようです。したがって、キーのユニークな値を見つける必要があります。