Dynamiczne renderowanie NextJS

Question 1

Przez długi czas wywoływacz, w końcu odbiera Next.js tak, że wiem, że jest to prawdopodobnie skończy się do czegoś głupi. Tak. Co jest nie tak z moim getStaticPaths() wartość tutaj? Wygląda na to, że sformatował go dokładnie tak, jak tego wymagają dokumenty. (Wartość przypisana paths jest console.log()'d w oknie terminala)

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

I getEvents() funkcja:

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

To getStaticPath jest asynchronicznej funkcji. Jeśli robisz coś takiego paths tutaj zawsze będzie Obietnica.

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

Należy użyć słowa kluczowego await tutaj, aby poczekać na wyniki:

const paths = await getEvents();

i w getEvents funkcja, którą należy odzyskać zawsze wyzwaniem axios.post, oto tak:

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

Poza tym, nie wiem, jak wygląda twój punkt końcowy api, ale droga do api powinien wyglądać w następujący sposób: ${globals.api_endpoint}/getEvents.php. Twój ostateczny punkt api nie powinna mieć ukośnika na końcu.

Question 3

Wspaniały. Dziękuję, @krybinski za pomoc. Oczywiście, to zwraca obietnica. Błąd nie była taka głupia, jak się spodziewałem, ale coś prostego, oczywiście.

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

To getStaticPath jest asynchronicznej funkcji. Jeśli robisz coś takiego paths tutaj zawsze będzie Obietnica.

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

Należy użyć słowa kluczowego await tutaj, aby poczekać na wyniki:

const paths = await getEvents();

i w getEvents funkcja, którą należy odzyskać zawsze wyzwaniem axios.post, oto tak:

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

Poza tym, nie wiem, jak wygląda twój punkt końcowy api, ale droga do api powinien wyglądać w następujący sposób: ${globals.api_endpoint}/getEvents.php. Twój ostateczny punkt api nie powinna mieć ukośnika na końcu.

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

Wspaniały. Dziękuję, @krybinski za pomoc. Oczywiście, to zwraca obietnica. Błąd nie była taka głupia, jak się spodziewałem, ale coś prostego, oczywiście.

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
    };
};

Dynamiczne renderowanie NextJS

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii