Как положить в стейт ответ от PromiseAll?

Question

[poles1469]

Добрый день!

Есть state, где храниться массив адресов для запроса:

const [films, setFilms] = React.useState(["https://swapi.dev/api/films/1/", "https://swapi.dev/api/films/2/", "https://swapi.dev/api/films/3/", "https://swapi.dev/api/films/6/",])

Так же есть стейт, куда нужно положить ответы запроса :

const [filmsName, setFilmsName] = React.useState([])

Что бы сделать запрос на массив элементов использовал PromiseAll:

const allP = await Promise.all(films.map(el => fetch(el)
      .then(el => el.json())
      .then(json => filmsNameArr.push(json))
      ))
      setFilmsName(filmsName)

filmsNameArr - массив созданный, что бы добавлять элементы, после получения объекта, только вот почему-то даже в сети запрос не отправляется и не видно, почему?

Заранее Спасибо!

Comments

[Сергей Соколов]

не понятно, где и как вызывается этот код с await Promise.all()

[Сергей Соколов]

посмотрите пример — там ещё используют флаг true/false, чтобы избежать race condition (гонки асинхронных событий)

[poles1469]

Сергей Соколов, использовал просто проверку if , на filmsName что бы не был пустым.

Answer 1

[Nikolay Matyushkin]

только вот почему-то даже в сети запрос не отправляется и не видно, почему?

Потому что это асинхронная операция, и реакт не будет ждать, пока она завершится. Если очень хочется, то любая асинхронщина должна выполняться в useEffect и с зависимостью, которая заставит перерендриться этот компонент.

Comments

[poles1469]

Она и так выполняется в useEffect, просто не вставил в пост, а так вот целый useEffect:

React.useEffect(() => {
    const getSourse = async (url) => {
      const getPerson = await getApiJson(url)
      setPersonInfo([{title: 'Height', data: getPerson.height}, {title: 'Name', data: getPerson.name}])
      const getFilms = await getApiJson(url)
      setFilms(getFilms.films)
      const allP = await Promise.all(films.map(el => fetch(el)
      .then(el => el.json())
      .then(json => filmsNameArr.push(json))
      ))
      setFilmsName(filmsNameArr)
    } 
    getSourse(getPersonUrl)
  }, [])

Если в зависимость добавляю films, то запрос отправляется бесконечно

[poles1469]

poles1469, если есть вопросы по поводу getApiJson:

getApiJson = async (url) => {
    try {
        const res = await fetch(url)
        if (!res.ok) {
            console.log('Err', res.status)
            return false
        }
        return await res.json()
    } catch (error) {
        console.error('Error', error.message)
        return false
    }
}

[Nikolay Matyushkin]

poles1469, так ты условие то добавь, что б не выполнялось бесконечно. Добавив зависимость надо в первую очередь думать о том, что эффект зациклиться может, стало быть надо его как-то ограничить. Например

React.useEffect(() => {
    if (!filmsName.length) {
        const getSourse = async (url) => {
        const getPerson = await getApiJson(url)
        setPersonInfo([{title: 'Height', data: getPerson.height}, {title: 'Name', data: getPerson.name}])
        const getFilms = await getApiJson(url)
        setFilms(getFilms.films)
        const allP = await Promise.all(films.map(el => fetch(el)
        .then(el => el.json())
        .then(json => filmsNameArr.push(json))
        ))
        setFilmsName(filmsNameArr)
      } 
      getSourse(getPersonUrl)
    }
  }, [filmsName])

[poles1469]

Nikolay Matyushkin, Благодарю! Сработало.