Как в React выполнить последовательно асинхронные функции?

Question

[rusrich]

Добрый день.

У меня две асинхронные функции получают данные через fetch.
Первая функция получает данные и записывает в State.
Вторая функция получает данные на основе записанных первой функцией данных в State и записывает их в другой State.

При загрузке страницы данные от первой функции в стейте находятся от второй нет.
Если сделать изменения в коде и сервер перезагрузится, то данные от второй функции в стейте появляются.

Подскажите решение.

Код ниже:

import React, { useEffect, useState } from 'react';
import { getCategories, getCollections, singleCategory } from "../../actions/category";
import Link from "next/link";

const Collect = ({ router }) => {
  const [ categories, setCategories ] = useState([])
  const [ collections, setCollections ] = useState([])
  const [ values, setValues ] = useState({
    error: '',
    success: '',
    loaded: false
  })

  useEffect(() => {
    initCategories()
    getCollect()

  }, [])


  const initCategories = () => {
    getCategories().then(data => {
      if (data.error) {
        setValues({ ...values, error: data.error })
      } else {
        setCategories(data)
        setValues({ ...values, loaded: true })
        console.log(categories)
      }
    })
    // getCollect()
  }

  const getCollect = () => {
    if(categories) {
      let mov = []
      categories.map((c, i) => {
        getCollections(c.slug, 6).then(data => {
          if (data.error) {
            console.log(data.error)
          } else {
            mov.push({ name: data.category.name, movies: data.movies })
          }
        })
      })
      setCollections(mov)
    } else {
      console.log('Categories are empty')
    }
  }


  return (
    <>
      <div></div>
    </>
  );
}


export default Collect;

Comments

[Вадим]

?

useEffect(() => {
    initCategories().then(getCollect)
  }, [])

И нужно сделать из неё return:

const initCategories = () => {
    return getCategories().then(data => {
      if (data.error) {
        setValues({ ...values, error: data.error })
      } else {
        setCategories(data)
        setValues({ ...values, loaded: true })
        console.log(categories)
      }
    })
    // getCollect()
  }

[rusrich]

Вадим, Спасибо, попробовал, но не сработало.

Здесь состояние второго Стейта без данных при обновлении страницы


В документе ставлю пробел и сохраняю документ. Сервер перезагружается и в Стейт записываются данные

[rusrich]

Я перепробовал разные варианты промисов, await, async, даже setTimeOut
Но при первом обновлении ничего не происходит. Как буд-то не с чем работать второй функции.
И ошибку не показывает
Прописывал условие, если данные не получены выводить сообщение в консоль, это условие тоже не срабатывает. То есть как буд-то данные есть.

Answer 1

[Антон Романков]

Можно сделать так:

const initCategories = async () => {
  try {
    const data = await getCategories()
    const collect = await getCollect(data)
    setCategories(data)
    setValues({ ...values, loaded: true })
  } catch (error) {
    setValues({ ...values, error })
  }
}

const getCollect = async data => {
  return await fetch('https://site.com')
}

Не стал переписывать все в точности, но суть, думаю, понятна.

Comments

[rusrich]

Не сработало.
Сделал по-другому. Вариант ниже

[Антон Романков]

Думаю, что дело в промисе.
showMoviesOfCollections - это синхронная функция
getCollections - это асинхронная функция, которая будет выполнена после showMoviesOfCollections.

Я бы рекомендовал сделать так:

const getCollect = (slug, limit) => {
    getCollections(slug, limit).then(data => {
      if (data.error) {
        console.log(data.error)
        // записать в стейт error
      } else {
        console.log(data.movies)
        // записать в стейт movies
      }
    })
  }

Также необходимо переписать то, что возвращает компонент на что-то типа:

{
   movies.length > 0 && movies.map(.....)
}

Также дополнительно рекомендую почитать про event loop в браузере.

[rusrich]

romant094, Я не представляю как в стейт записать значения из цикла.

У меня получается два цикла:
Я получаю список категорий затем:
1. по списку категорий прохожу и получаю список фильмов
2. по списку фильмов прохожу и пытаюсь отрендерить в списке категорий

Ваш вариант, на сколько я понял, будет работать при обработке одной категории.
С одной проблем нет, я могу вывести как раз через стейт.
Но как быть с циклом, не знаю.

[Антон Романков]

А почему бы бэку не отдавать категории с группировкой по фильмам? Или в каждый фильм добавить category, а на фронте уже фильтровать по категории.
Получается на фронте очень сложная логика... Можно, конечно, запихнуть все в промисы и выполнять что-то типа Promise.all, но зачем?

Можно еще вариант сделать:
1. получить категории
2. при клике на категорию получать фильмы для нее

Будет в разы проще.

[rusrich]

romant094, У меня так и получалось. По одной категории прописывать в шаблон, передавать slug категории и все работало отлично. Проблема с выводом всех категорий из массива и отображением всех фильмов в каждой категории.

В общем спасибо большое за направление. Вопрос решил переписав бэкенд.

Answer 2

[rusrich]

Сделал так.
В итоге все работает как надо, но не могу отрендерить, как буд-то функция showMoviesOfCollections(data.movies) ничего не возвращает.
В консоли данные корректные.

Как можно исправить ситуацию?

import React, { useEffect, useState } from 'react';
import Cardstyle from "../../components/movie/cardstyle";
import { getCategories, getCollections, singleCategory } from "../../actions/category";
import Link from "next/link";

const Collect = ({ router }) => {
  const [ categories, setCategories ] = useState([])
  const [ values, setValues ] = useState({
    error: '',
    success: '',
    loaded: false
  })

  useEffect(() => {
    initCategories()
  }, [])

  const initCategories = () => {
    return getCategories().then(data => {
      if (data.error) {
        setValues({ ...values, error: data.error })
      } else {
        setCategories(data)
      }
    })
  }

  const getCollect = (slug, limit) => {
    getCollections(slug, limit).then(data => {
      if (data.error) {
        console.log(data.error)
      } else {
        console.log(data.movies)
        return showMoviesOfCollections(data.movies)
      }
    })
  }

  const showMoviesOfCollections = (movies) => {
    return movies.map((movie, i) => {
      return (
        <div key={ i } className="col-6 col-sm-6 col-md-4 col-xl-2 mt-5 mb-5 mb-xl-0">
          <Cardstyle movie={ movie }/>
        </div>
      )
    })
  }

  const viewCollection = () => {
    return categories.map((cat, i) => {
      return (
        <div key={ i } className="bg-gray-1100 dark">
          { getCollect(cat.slug, 6) }
        </div>
      )
    })
  }

  return (
    <>
      { viewCollection() }
    </>
  );
}


export default Collect;