Динамический рендеринг NextJS

Question 1

Долгое время разработчик, наконец, берет трубку Next.js, так что я знаю, что это, вероятно, сведется к чему-то глупому. Вот так. Что не так с моим getStaticPaths() ценность здесь? Похоже, я отформатировал его точно так, как того требуют документы. (Значение присваивается paths является console.log()'d в окне терминала)

export const getStaticPaths = async () => {
    const paths = getEvents();
    return {
        paths,
        fallback: false
    };
};

И getEvents() функция:

export const getEvents = () => {
    axios.post(`${globals.api_endpoint}getEvents.php`, {
        action: 'getStaticPaths'
    }).then((r) => {
        if (!r.data.error) {
            const paths = r.data.map(index => {
                return {
                    params: {
                        id: index.event_id
                    }
                };
            });
            console.log(paths);
            return paths;
        }
    });
};

Question 2

То getStaticPath является асинхронной функцией. Если вы делаете что-то подобное paths здесь всегда будет Обещание.

const paths = getEvents();
return {
    paths,
    fallback: false
};

Вы должны использовать ключевое слово await здесь, чтобы дождаться результатов:

const paths = await getEvents();

и в getEvents функция, которую вы должны вернуть всем вызовом axios.post, вот так:

return axios.post(`${globals.api_endpoint}getEvents.php`, {...

Кроме того, я не знаю, как выглядит ваша конечная точка api, но путь к api должен выглядеть следующим образом: ${globals.api_endpoint}/getEvents.php. Ваша конечная точка api не должна иметь косой черты в конце.

Question 3

Великолепный. Спасибо, @krybinski за помощь. Конечно, это возвращает обещание. Ошибка была не такой глупой, как я ожидал, но что-то простое, конечно.

export const getEvents = async () => {
    return axios.post(`${globals.api_endpoint}getEvents.php`, {
        action: 'getStaticPaths'
    });
};


export const getStaticPaths = async () => {
    const response = await getEvents();
    const paths = response.data.map(event => {
        return {
            params: {
                id: event.event_id
            }
        }
    });
    return {
        paths,
        fallback: false
    };
};

krybinski · Answer 1 · 2021-11-23T05:57:30

То getStaticPath является асинхронной функцией. Если вы делаете что-то подобное paths здесь всегда будет Обещание.

const paths = getEvents();
return {
    paths,
    fallback: false
};

Вы должны использовать ключевое слово await здесь, чтобы дождаться результатов:

const paths = await getEvents();

и в getEvents функция, которую вы должны вернуть всем вызовом axios.post, вот так:

return axios.post(`${globals.api_endpoint}getEvents.php`, {...

Кроме того, я не знаю, как выглядит ваша конечная точка api, но путь к api должен выглядеть следующим образом: ${globals.api_endpoint}/getEvents.php. Ваша конечная точка api не должна иметь косой черты в конце.

FrontEndDev · Answer 2 · 2021-11-23T13:53:11

Великолепный. Спасибо, @krybinski за помощь. Конечно, это возвращает обещание. Ошибка была не такой глупой, как я ожидал, но что-то простое, конечно.

export const getEvents = async () => {
    return axios.post(`${globals.api_endpoint}getEvents.php`, {
        action: 'getStaticPaths'
    });
};


export const getStaticPaths = async () => {
    const response = await getEvents();
    const paths = response.data.map(event => {
        return {
            params: {
                id: event.event_id
            }
        }
    });
    return {
        paths,
        fallback: false
    };
};

Динамический рендеринг NextJS

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории