NextJS Dinámica De Representación

Question 1

Mucho tiempo desarrollador finalmente recoger Next.js, así que yo sé que este es, probablemente, va a reducirse a algo tonto. Aquí va. Lo que está mal con mi getStaticPaths() el valor aquí? Parece que he formateado es exactamente como la documentación que requieren. (Valor asignado a paths es console.log()'d en la ventana de terminal)

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

Y el getEvents() función:

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

El getStaticPath es asincronica función. Si vas a hacer algo como esto paths siempre será una Promesa aquí.

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

Usted debe utilizar una palabra clave await aquí a esperar los resultados:

const paths = await getEvents();

y en el getEvents la función debe devolver todos los axios.posterior a las llamadas, así:

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

Además, no sé cómo su extremo de api se ve pero la api ruta de acceso debe tener este aspecto: ${globals.api_endpoint}/getEvents.php. Su api extremo no debe tener la barra al final.

Question 3

Precioso. Gracias, @krybinski por la ayuda. De curso es la devolución de una promesa. El error no era tan tonto como yo esperaba, pero algo simple, seguro.

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

El getStaticPath es asincronica función. Si vas a hacer algo como esto paths siempre será una Promesa aquí.

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

Usted debe utilizar una palabra clave await aquí a esperar los resultados:

const paths = await getEvents();

y en el getEvents la función debe devolver todos los axios.posterior a las llamadas, así:

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

Además, no sé cómo su extremo de api se ve pero la api ruta de acceso debe tener este aspecto: ${globals.api_endpoint}/getEvents.php. Su api extremo no debe tener la barra al final.

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

Precioso. Gracias, @krybinski por la ayuda. De curso es la devolución de una promesa. El error no era tan tonto como yo esperaba, pero algo simple, seguro.

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 Representación

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría