반응에서지도 함수를 사용하여 json 파일 반복하기

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를 읽고 아마 튜토리얼을 통해 이동한다 결과 목록을 가지고 있고이 같은 그들을지도 :

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

내가 randomuser.me에 대해 무엇인지 모르겠지만, 각 결과에서 ID 필드가 매우 도움이되지 것 같다. 따라서 키의 고유 한 값을 찾아야합니다.