Почему моя функция поиска так медленно + багги иногда?

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...') 
    }) 
}