Реагировать на 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
        }))
}