reactjs - 使用 Vimeo API 反应 useEffect 和迭代数组

Question

我有一系列尝试使用 vimeo API 来获取四个缩略图 jpg。我有一系列视频 ID

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

我正在使用 setState 导入和使用数组

import vimeo;

const [data , setData ] = useState(vimeo)

我有一个单独的状态，我想存储缩略图数据：

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

我希望能够遍历 useEffect 挂钩内的每个 vimeo id。我正在使用 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()
},[])

但是这段代码我得到了以下错误：

解析错误：不能在异步函数之外使用关键字“等待”

有什么想法吗？谢谢。

Answer 1

看看这个答案以及我在谷歌上找到的

您将需要使用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
        }))
}