Reactjs从日历异步加载事件-Google Calendar API

Question

我正在尝试从我使用gapi.client.request获取的Google日历api中加载事件，问题是我无法找到一种正确使用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);
        });
}

事件不会在组件之前加载，因此无法正确等待它们。我希望事件可以异步加载，以便它们与其他演示组件同时显示。

Answer 1

似乎您的代码中有一些小问题。

首先，请不要忘记使您的getEvents()函数异步。

第二，请记住在useEffect()方法上向s top the function from triggering on every single update添加第二个参数。

因此，您的代码应如下所示：

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

您可能想了解更多有关如何使用React处理API的信息，这里是good resource。

希望这会有所帮助。