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

Posted 2023-03-07

【中文标题】使用 Vimeo API 反应 useEffect 和迭代数组

【英文标题】：React useEffect and iterating over array using Vimeo API

【发布时间】：2019-10-09 01:41:12

【问题描述】：

我有一系列尝试使用 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()
,[])

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

解析错误：不能在异步函数之外使用关键字 'await'

有什么想法吗？谢谢。

【问题讨论】：

解析器错误除外（您刚刚放错了async 声明，它应该在data.map 回调而不是fetchData）您希望这段代码如何工作？目前它总是会覆盖您获取的最后一个缩略图。此外，在这种情况下，result 将是 axios 响应，我想你会想要 data: result.data...

【参考方案1】：

看看this answer 和what I found on 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
        ))

【讨论】：

虽然这在语法上是正确的，但地图代码通常看起来都是错误的。

@James 为什么是the map code in general looks all wrong？我复制了您的代码并添加了正确的async。

@Vencovksy 我不是 OP（同名）。

@James 你抓到我了哈哈哈

谢谢，但我不认为我可以在地图函数中使用 await 作为参数顺便说一句我是 OP :)