NextJS Redare Dinamică

Question 1

Mult timp, producător în cele din urmă ridicarea Next.js, așa că am știu acest lucru este, probabil, de gând să se fierbe în jos pentru ceva prostesc. Aici merge. Ce e în neregulă cu a mea getStaticPaths() valoare aici? Se pare ca am formatat exact ca docs nevoie. (Valoarea fiind atribuite paths este console.log()'d în fereastra terminal)

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

Și getEvents() funcția:

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

La getStaticPath este o asincron funcție. Dacă faci ceva de genul asta paths va fi întotdeauna o Promisiune aici.

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

Ar trebui să utilizați o așteaptă cheie aici să așteptați pentru rezultatele:

const paths = await getEvents();

și în getEvents funcția ar trebui să se întoarcă toate axios.după apel, astfel:

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

În plus, nu știu cât de api-ul final arata dar api cale ar trebui să arate astfel: ${globals.api_endpoint}/getEvents.php. Api-ul final nu ar fi slash la sfârșitul anului.

Question 3

Superb. Multumesc, @krybinski pentru ajutor. De curs se întoarce o promisiune. Greseala nu a fost destul de la fel de prost cum m-am așteptat, dar ceva simplu, sigur.

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

La getStaticPath este o asincron funcție. Dacă faci ceva de genul asta paths va fi întotdeauna o Promisiune aici.

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

Ar trebui să utilizați o așteaptă cheie aici să așteptați pentru rezultatele:

const paths = await getEvents();

și în getEvents funcția ar trebui să se întoarcă toate axios.după apel, astfel:

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

În plus, nu știu cât de api-ul final arata dar api cale ar trebui să arate astfel: ${globals.api_endpoint}/getEvents.php. Api-ul final nu ar fi slash la sfârșitul anului.

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

Superb. Multumesc, @krybinski pentru ajutor. De curs se întoarce o promisiune. Greseala nu a fost destul de la fel de prost cum m-am așteptat, dar ceva simplu, sigur.

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 Redare Dinamică

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie