Reactjs Асинхронная загрузка событий из календаря - API Календаря Google - PullRequest
Новая
       2

Reactjs Асинхронная загрузка событий из календаря - API Календаря Google

0 голосов
/ 10 октября 2019

Я пытаюсь загрузить события из API календаря Google, которые я получаю с помощью gapi.client.request, проблема в том, что я не могу понять, как правильно использовать async / await. Мои события загружаются после моих презентационных компонентов. Я использовал async await раньше, и он работал правильно с fetch и другими API. Есть ли другой способ подождать google.thenable объекта. Так как это обещание, как я и думал, с ним будет легче справиться, как с обещаниями, которые я получал раньше. Я совершенно потерян здесь, любая помощь будет оценена. 

const [events, setEvents] = useState([]);

useEffect(() => {
    getEvents();
});

async function get(){
    await getEvents();
}

function getEvents(){
        init()
            .then(() => {
                return gapi.client.request({
                    'path': `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events`,
                })
            })
            .then((res) => {
            const allEvents = res.result.items;
            setEvents(sortedEvents);
        }, (reason) => {
            console.log(reason);
        });
}

События не загружаются до компонентов, поэтому их не ожидают должным образом. Я хотел бы, чтобы мои события загружались асинхронно, чтобы они отображались одновременно с другими компонентами представления.

1 Ответ

0 голосов
/ 10 октября 2019

Кажется, у вас есть небольшие проблемы в коде.

Прежде всего, не забудьте сделать вашу getEvents() функцию асинхронной.

Во-вторых, не забудьте добавить вторуюпараметры вашего useEffect() метода для s исключают запуск функции при каждом обновлении .

Итак, ваш код должен выглядеть следующим образом: 

const [events, setEvents] = useState([]);

useEffect(() => {
    getEvents();
}, []);

async function get(){
    await getEvents();
}

async function getEvents(){
        init()
            .then(() => {
                return gapi.client.request({
                    'path': `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events`,
                })
            })
            .then((res) => {
            const allEvents = res.result.items;
            setEvents(sortedEvents);
        }, (reason) => {
            console.log(reason);
        });
}

ВыВозможно, вы захотите прочитать больше о том, как обращаться с API с помощью React, вот вам хороший ресурс .

Надеюсь, это поможет.

...