NextJS ปรับอัตโนมัติการแสดงผล

Question 1

เวลานานมากผู้พัฒนาสุดท้ายรับ Next.js ดังนั้นฉันรู้ว่านี่มันอาจจะต้องต้มลงไปบางอย่างโง่มาก คุณคิดว่าสเตฟานเป็นยังไง? เกิดอะไรขึ้นกับฉัน getStaticPaths() ค่าอยู่ที่นี่? มันดูเหมือนว่าฉัน formatted มันเหมือนอย่างที่ค docs ต้องการ. (ค่าที่ได้รับมอบหมายให้ paths นี่ console.log()'d บนหน้าต่างเทอร์มินัล)

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

และ getEvents() ฟังก์ชัน:

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

คน getStaticPath เป็น async ฟังก์ชัน. ถ้าคุณกำลังทำอะไรบางอย่างที่เหมือนนี้ paths จะเป็นสัญญากับที่นี่

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

คุณควรจะใช้การคำค้นที่นี่เพื่อรอผลตรวจ:

const paths = await getEvents();

และใน getEvents ฟังก์ชันคุณควรจะกลับมาทั้งหมด axios.โพสโทรเรียนเหมือนกับของ:

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

ผมยังไม่รู้วิธีของคุณรูปแบบ api endpoint ดูเหแต่งรูปแบบ api เส้นทางควรจะดูเหมือนนี้: ${globals.api_endpoint}/getEvents.php. ของรูปแบบ api endpoint ไม่ควรต้องเฉือนกับตอนที่ทุกอย่างจะจบลง

Question 3

สวยมาก ขอบคุณ@krybinski สำหรับความช่วยเหลือ ของ แน่นอน มันกลับมาเป็นสัญญา ความผิดพลาดที่ไม่ค่อยโง่อย่างที่ฉันคาดหวังแต่มีบางอย่างเรียบง่ายสำหรับแน่นอน

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

คน getStaticPath เป็น async ฟังก์ชัน. ถ้าคุณกำลังทำอะไรบางอย่างที่เหมือนนี้ paths จะเป็นสัญญากับที่นี่

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

คุณควรจะใช้การคำค้นที่นี่เพื่อรอผลตรวจ:

const paths = await getEvents();

และใน getEvents ฟังก์ชันคุณควรจะกลับมาทั้งหมด axios.โพสโทรเรียนเหมือนกับของ:

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

ผมยังไม่รู้วิธีของคุณรูปแบบ api endpoint ดูเหแต่งรูปแบบ api เส้นทางควรจะดูเหมือนนี้: ${globals.api_endpoint}/getEvents.php. ของรูปแบบ api endpoint ไม่ควรต้องเฉือนกับตอนที่ทุกอย่างจะจบลง

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

สวยมาก ขอบคุณ@krybinski สำหรับความช่วยเหลือ ของ แน่นอน มันกลับมาเป็นสัญญา ความผิดพลาดที่ไม่ค่อยโง่อย่างที่ฉันคาดหวังแต่มีบางอย่างเรียบง่ายสำหรับแน่นอน

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 ปรับอัตโนมัติการแสดงผล

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่