Реагировать на useEffect и выполнять итерации по массиву с помощью API-интерфейса Vimeo.

Question

У меня есть массив попыток получить четыре эскиза jpgs с помощью API-интерфейса vimeo.У меня есть массив идентификаторов видео

const vimeo = [
    "325845565","325846054","325848270","325849439"
]

Я использую setState для импорта и использования массивов

import vimeo;

const [data , setData ] = useState(vimeo)

У меня есть отдельное состояние, в котором я хочу хранить данные миниатюр:

const [thumbNails, setThumbNails] = useState({
    data : []
})

Я бы хотел иметь возможность перебирать каждый vimeo-идентификатор в хуке useEffect.Я использую axios что-то вроде:

useEffect(() => {
    const fetchData = async () => {
        data.map(videoID => {
            const result = await axios(`http://vimeo.com/api/v2/video/${data[0]}.json`);
            setThumbNails({
                data : result
            })
        }
        })

    fetchData()
},[])

, но с этим кодом я получаю следующую ошибку:

Ошибка синтаксического анализа: невозможно использовать ключевое слово 'await' вне асинхронной функции

Есть мысли?Спасибо.

Answer 1

Что посмотреть на этот ответ , а также то, что я нашел в Google

Вам нужно будет использовать Promise.all, а затемsetState с возвращенным массивом

const fetchData = async () => {
    let fetchedResult = await Promise.all(data.map(videoID => 
        axios(`http://vimeo.com/api/v2/video/${data[0]}.json`)
    ))
    fetchedResult.map(data => setThumbNails({
            data : result
        }))
}