검색 기능이 느리거나 버그가 발생하는 이유는 무엇입니까?

Question

원래 데이터를 가져올 URL은 하나 뿐이었지만 내 앱은 완벽하게 작동했습니다. 하지만 필자는 필요한 데이터를 가져 오기 위해 두 개의 다른 URL을 사용해야한다는 것을 깨달았습니다. 그래서 코드를 조금 변경했습니다. getData 함수를 제외하고는 거의 동일합니다. 여기서는 map을 사용하여 URL 목록을 반복하고 데이터를 가져 왔습니다. 내 응용 프로그램은 지금 정말 버그입니다.

문제 : 나는 트리머를 검색 할 때

, 그것은 때때로 결코 페이지의 결과를 렌더링합니다. 그리고 메시지 "search for your favorite streamer!"은 this.state.value이 ' '이 아니더라도 사라지지 않습니다. 그러나 입력을 변경하면 아무데도 렌더링되지 않습니다.

때때로 데이터를 가져 오지 못하고 데이터가없는 FinderResultContainer이 렌더링됩니다. (이름 없음, img 없음, 오프라인/온라인 없음)

정확히 여기 무슨 일이 일어 났습니까? 구성 요소 수명주기 방법을 사용하지 않기 때문에 그런 느낌입니다. 그렇다면 정확히 무엇을해야합니까? 나는 초보자이기 때문에 어떤 지침이 필요하다.

getData(value) { 
let streamerData = []; 
let streamerInfo = {}; 

let urls = ['https://wind-bow.gomix.me/twitch-api/streams/' + value, 'https://wind-bow.gomix.me/twitch-api/users/' + value]; 

urls.map(function(each, index) { 
    fetch(each).then((response) => 
    response.json() 
).then((streamer) => streamerData.push(streamer)).then(()=>streamerInfo[index]=streamerData[index]).then(()=>{if (index === urls.length-1){this.setState({streamer: streamerData})}})},this) 
} 

https://codepen.io/brood915/pen/OWQpmy

Answer 1

fetch 비동기이며, 그것을 할 수 있습니다 때 정확히 모르는, 그래서 약속을 반환합니다. Promise.all()을 사용하여 모든 약속을 지키고 데이터를 사용할 수 있습니다 (모든 약속은 동시에 실행되므로 큰 목록의 URL이있는 경우 초당 요청 톤을 전송합니다).

편집 : 나는 당신의 펜을보고 코드를 단순화했는데, 이것은 나에게 잘 돌아 간다. 빈 구성 요소가 없습니다. 약속을 반환 할 때는 에만이 필요하고 then을 사용해야합니다.

getData(value, type) { 
    let urls = [ 
    'https://wind-bow.gomix.me/twitch-api/streams/' + value, 
    'https://wind-bow.gomix.me/twitch-api/users/' + value 
    ]; 

    const getJson = url => fetch(url).then(res => res.json()); 

    Promise.all(urls.map(getJson)) 
    .then(streamer => { 
     if (type === "search") { 
     this.setState({ streamer }); 
     console.log("searching") 
     } else { 
     console.log("displaying"); 
     this.getStreamer(streamer[0], streamer[1]); 
     } 
    }).catch(err => { 
     console.log('Something went wrong...') 
    }) 
}