NextJS 动态渲染

Question

长期开发人员终于开始使用 Next.js，所以我知道这可能会归结为一些愚蠢的事情。开始。我这里的 getStaticPaths() 值有什么问题？看来我已经完全按照文档的要求对其进行了格式化。（分配给 paths 的值在终端 window 中是 console.log()）

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

Answer 1

getStaticPath 是一个异步函数。如果你正在做这样的事情 paths 将永远是这里的承诺。

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

您应该在此处使用 await 关键字来等待结果：

const paths = await getEvents();

并且在 getEvents 函数中，您应该 return 所有 axios.post 调用，如下所示：

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

此外，我不知道您的 api 端点看起来如何，但 api 路径应该如下所示：${globals.api_endpoint}/getEvents.php。您的 api 端点末尾不应有斜杠。

Answer 2

太棒了。谢谢@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 动态渲染

NextJS Dynamic Rendering

dynamic

reactjs

next.js