NextJS Rendering Dinamico

Question 1

Tempo di sviluppatori, infine, raccogliendo Next.js, quindi so che questo è probabilmente andando a bollire giù per qualcosa di stupido. Qui va. Cosa c'è di sbagliato con il mio getStaticPaths() qui il valore? Sembra che ho formattato esattamente come i documenti necessari. (Valore assegnato per paths è console.log()'d nella finestra del terminale)

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

E il getEvents() funzione:

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

Il getStaticPath è una funzione async. Se stai facendo qualcosa di simile a questo paths sarà sempre una Promessa qui.

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

Si dovrebbe usare una parola chiave in attesa qui per attendere i risultati:

const paths = await getEvents();

e nel getEvents la funzione deve restituire tutti i axios.post call, in questo modo:

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

Inoltre, non so come il tuo endpoint api, ma sembra api percorso dovrebbe essere simile a questo: ${globals.api_endpoint}/getEvents.php. Il tuo endpoint api non hanno la barra alla fine.

Question 3

Splendida. Grazie, @krybinski per l'aiuto. Del corso è la restituzione di una promessa. L'errore non era così stupido come pensavo, ma qualcosa di semplice, di sicuro.

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

Il getStaticPath è una funzione async. Se stai facendo qualcosa di simile a questo paths sarà sempre una Promessa qui.

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

Si dovrebbe usare una parola chiave in attesa qui per attendere i risultati:

const paths = await getEvents();

e nel getEvents la funzione deve restituire tutti i axios.post call, in questo modo:

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

Inoltre, non so come il tuo endpoint api, ma sembra api percorso dovrebbe essere simile a questo: ${globals.api_endpoint}/getEvents.php. Il tuo endpoint api non hanno la barra alla fine.

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

Splendida. Grazie, @krybinski per l'aiuto. Del corso è la restituzione di una promessa. L'errore non era così stupido come pensavo, ma qualcosa di semplice, di sicuro.

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 Rendering Dinamico

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria