Как обновить state по завершению нескольких сетевых запросов?

Question

Как правильно обновить state за 1 раз после выполнения всех сетевых запросов?

// idList === ["34563", "123423", "2359239"]

const [itemsList, setItemsList] = useState([]);

useEffect(() => {
  const updatedItemsList = [];

  idList.forEach((id) => {
    const item = doSomeFetch(id);
    updatedItemsList.push(item)
  })

  setItemsList(updatedItemsList)
}, [props.idList])

Ожидаемый результат:

проходимся по массиву с id
делаем запрос к серверу на каждый id
получаем объект по его id и добавляем в массив
по завершению всех запросов полученный массив прокидываем в стейт

Answer 1

useEffect(() => {

  Promise.all(idList.map((id) => doSomeFetch(id)))
    .then((updatedItemsList) => setItemsList(updatedItemsList))
    .catch(console.error)

}, [props.idList])

^{можно даже немного короче}

useEffect(() => {

  Promise.all(idList.map(doSomeFetch))
    .then(setItemsList).catch(console.error)

}, [props.idList])

БЛОГ НА HUSL

Как обновить state по завершению нескольких сетевых запросов?

Ответы (1 шт):