Реагировать на useEffect и выполнять итерации по массиву с помощью API-интерфейса Vimeo
У меня есть массив попыток получить четыре эскиза 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' вне асинхронной функции
Какие-нибудь мысли? Благодарю.
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
}))
}