Question

使用YouTube API首先通过关键字搜索视频，然后完成第二次调用以获得视频统计信息，以便能够按观看次数过滤掉。

问题

对于状态良好的视频，我可以成功地注销第一个API调用youtube.get中返回的ID。然后，如果返回了视频，它将拉出视频ID以再次更新状态。接下来，我发送另一个API调用views.api来收集我想用于按观看次数进行过滤的视频统计信息，因为youtube API不会在一个调用中返回该统计信息（除非我错过了如何做到这一点，不必要地过度使用API）。

console.log(videoStats.data.items);返回API调用中特定ID的正确统计信息，但是它没有更新状态，并且我有一个带有console.log(this.state.videoStatistics);的空数组

我尝试使用和不使用传播操作符，但是两者都不更新。相当新的反应，所以我敢肯定我缺少一些简单的东西来使它正确更新。另外，我该如何重组它以使其更有效率，而不是重复if语句？

我正在寻找的过程

使用youtube / search API查询搜索
从结果中提取视频ID
另一个对/ videos进行统计的API调用
按用户输入的观看次数过滤
返回的视频与观看次数过滤器匹配
所有不匹配的视频都将被删除，然后将下一个视频拉出

下面是我的提交方法

handleSubmit = async (searchQuery) => {
        const results = await youtube.get('/search', {
            params: {
                part: 'snippet',
                maxResults: 4,
                key: KEY,
                q: searchQuery,
                type: 'video',
            },
        });
        this.setState({
            videos: results.data.items,
        });

        if (this.state.videos) {
            const videoList = [...this.state.videos];

            videoList.map((video) => {
                let id = video.id.videoId;
                this.setState({
                    videoIds: [...this.state.videoIds, id],
                });
            });
        }

        if (this.state.videoIds) {
            let vidid = [...this.state.videoIds];

            vidid.map(async (id) => {
                const videoStats = await views.get('/videos', {
                    params: {
                        part: 'statistics',
                        maxResults: 4,
                        key: KEY,
                        id: id,
                    },
                });
                console.log(videoStats.data.items);
                this.setState({
                    videoStatistics: [...videoStats.data.items],
                });
            });
            console.log(this.state.videoStatistics);
        }
    };

反应状态未更新，但可以记录结果

0 个答案: