React State не обновляется, но может регистрировать результаты

Question

Работа с API YouTube для первого поиска видео по ключевому слову, а затем завершения второго вызова, чтобы получить статистику видео, чтобы можно было отфильтровать по количеству просмотров.

Проблема

Я могу успешно консоль выйти из идентификаторов, возвращенных при первом вызове API youtube.get для видео в состоянии. Затем, если видео возвращено, он извлекает идентификаторы видео, чтобы обновить состояние снова. Затем я отправляю еще один вызов API views.api, чтобы собрать статистику видео, которую я хочу использовать для фильтрации по количеству просмотров, поскольку API youtube не возвращает это за один вызов (если я не пропустил, как это сделать, и чрезмерно использую API излишне) .

console.log(videoStats.data.items); возвращает правильную статистику для указанного c ID в вызове API, однако это не обновляет состояние, и у меня есть пустой массив с console.log(this.state.videoStatistics);

I ' Я пробовал с оператором распространения и без него, но он не обновляется ни с одним из них. Довольно новый, чтобы реагировать, поэтому я уверен, что есть что-то простое, что мне не хватает, чтобы заставить это корректно обновляться. Кроме того, как я могу реструктурировать это, чтобы быть более эффективным, чем повторяющиеся операторы if?

Процесс, который я ищу

1. Поиск запросов с помощью YouTube / API поиска
2. извлечение идентификаторов видео из результатов
3. еще один вызов API для / videos для статистики
4. фильтр по количеству просмотров, введенных пользователем
5. возвращенные видео, которые соответствуют фильтру по количеству просмотров
6. любые видео, которые не отображаются t match отбрасываются, а следующее видео извлекается

Ниже мой метод отправки

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);
        }
    };