NextJS Rendu Dynamique

Question 1

Longtemps développeur enfin ramasser Next.js, donc je sais que cela va probablement se résumer à quelque chose de stupide. Va ici. Quel est le problème avec mon getStaticPaths() valeur ici? Il me semble que je l'ai formaté exactement comme les docs besoin. (Valeur attribuée à paths est console.log()'d dans la fenêtre de terminal)

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

Et la getEvents() fonction:

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

L' getStaticPath est une fonction async. Si vous êtes en train de faire quelque chose comme ceci paths sera toujours une Promesse ici.

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

Vous devez utiliser un mot clé await ici pour attendre les résultats:

const paths = await getEvents();

et dans le getEvents fonction, vous devez retourner tous les axios.appel post, comme suit:

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

En outre, je ne sais pas comment votre api extrémité ressemble, mais l'api chemin devrait ressembler à ceci: ${globals.api_endpoint}/getEvents.php. Votre api point de terminaison ne devrait pas avoir le slash à la fin.

Question 3

Magnifique. Merci, @krybinski pour l'aider. De sûr, c'est le retour d'une promesse. L'erreur n'était pas aussi stupide que je le pensais, mais quelque chose de simple, pour sûr.

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

L' getStaticPath est une fonction async. Si vous êtes en train de faire quelque chose comme ceci paths sera toujours une Promesse ici.

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

Vous devez utiliser un mot clé await ici pour attendre les résultats:

const paths = await getEvents();

et dans le getEvents fonction, vous devez retourner tous les axios.appel post, comme suit:

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

En outre, je ne sais pas comment votre api extrémité ressemble, mais l'api chemin devrait ressembler à ceci: ${globals.api_endpoint}/getEvents.php. Votre api point de terminaison ne devrait pas avoir le slash à la fin.

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

Magnifique. Merci, @krybinski pour l'aider. De sûr, c'est le retour d'une promesse. L'erreur n'était pas aussi stupide que je le pensais, mais quelque chose de simple, pour sûr.

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 Rendu Dynamique

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie