NextJS Dinâmica De Renderização

Question 1

Muito tempo developer, finalmente, pegar Next.js, então eu sei que este é, provavelmente, vai se resumem a algo bobo. Aqui vai. O que há de errado com a minha getStaticPaths() valor aqui? Parece que eu já formatada exatamente como o docs exigir. (Valor a ser atribuído a paths é console.log()'d na janela de terminal)

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

E o getEvents() função:

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

O getStaticPath é uma função async. Se você está fazendo algo parecido com isto paths sempre será uma Promessa aqui.

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

Você deve usar um esperam por palavra-chave aqui à espera dos resultados:

const paths = await getEvents();

e no getEvents a função deve retornar todos os axios.chamada post, assim:

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

Além disso, eu não sei como a sua api de ponto de extremidade parece, mas a api do caminho deve ser semelhante a este: ${globals.api_endpoint}/getEvents.php. A sua api de ponto de extremidade não deve ter a barra no final.

Question 3

Lindo. Obrigado, @krybinski para o ajudar. Do curso é de retornar de uma promessa. O erro não foi tão bobo quanto eu esperava, mas algo simples, com certeza.

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

O getStaticPath é uma função async. Se você está fazendo algo parecido com isto paths sempre será uma Promessa aqui.

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

Você deve usar um esperam por palavra-chave aqui à espera dos resultados:

const paths = await getEvents();

e no getEvents a função deve retornar todos os axios.chamada post, assim:

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

Além disso, eu não sei como a sua api de ponto de extremidade parece, mas a api do caminho deve ser semelhante a este: ${globals.api_endpoint}/getEvents.php. A sua api de ponto de extremidade não deve ter a barra no final.

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

Lindo. Obrigado, @krybinski para o ajudar. Do curso é de retornar de uma promessa. O erro não foi tão bobo quanto eu esperava, mas algo simples, com certeza.

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 Dinâmica De Renderização

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria