NextJS Dynamické Renderovanie

Question 1

Dlho developer nakoniec vyzdvihnutie Next.js, tak viem, že je to pravdepodobne bude scvrkne na niečo hlúpe. Tu ide. Čo je zle s mojím getStaticPaths() hodnotu tu? Vyzerá to, že som formátované to presne tak, ako dokumenty vyžadujú. (Hodnoty sú priradené paths je console.log()"d v terminálové okno)

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

A getEvents() funkcia:

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

Na getStaticPath je async funkciu. Ak robíte niečo ako toto paths vždy bude Sľub tu.

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

By ste mali používať čakajú kľúčové slovo je tu počkať na výsledky:

const paths = await getEvents();

a v getEvents funkcia mali vrátiť všetky axios.post volania, tak ako:

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

Okrem toho, neviem, ako sa váš api koncový bod vyzerá, ale api cesta by mala vyzerať takto: ${globals.api_endpoint}/getEvents.php. Váš koncový bod rozhrania api by nemali mať lomítko na konci.

Question 3

Nádherné. Vďaka, @krybinski za pomoc. Z kurzu o vrátenie sľub. Chyba nebolo to také hlúpe, ako som čakal, ale niečo jednoduché, pre istotu.

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

Na getStaticPath je async funkciu. Ak robíte niečo ako toto paths vždy bude Sľub tu.

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

By ste mali používať čakajú kľúčové slovo je tu počkať na výsledky:

const paths = await getEvents();

a v getEvents funkcia mali vrátiť všetky axios.post volania, tak ako:

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

Okrem toho, neviem, ako sa váš api koncový bod vyzerá, ale api cesta by mala vyzerať takto: ${globals.api_endpoint}/getEvents.php. Váš koncový bod rozhrania api by nemali mať lomítko na konci.

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

Nádherné. Vďaka, @krybinski za pomoc. Z kurzu o vrátenie sľub. Chyba nebolo to také hlúpe, ako som čakal, ale niečo jednoduché, pre istotu.

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 Dynamické Renderovanie

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii