时间戳

首页 > 解决方案 > 页面“/[slug]”的“getInitialProps”结果中的循环结构

reactjs - 页面“/[slug]”的“getInitialProps”结果中的循环结构

问题描述

我遇到了这个错误，已经阅读了文档和其他答案，但仍然不明白为什么。

我想做的是一个 api 调用，如果有匹配的帖子，我想渲染 Post 组件，如果没有，我想重定向或渲染错误页面。

当我点击一个现有的帖子链接时，我得到了帖子，但是当我随机放置一些东西来生成 404 状态时，我得到了标题错误。

这是我的帖子页面：

const PostPage = ({ post }) => {
    return (
        <>
            {post.status === 200 ? (
                <Post post={post.data.items[0]} />
            ) : (
                <Error statusCode={post.status} />
            )}
        </>
    );
};

PostPage.getInitialProps = async ({ query }) => {
    const post = await getPostBySlug(query.slug);
    return { post };
};

和我的 _error.js 页面：

function Error({ statusCode }) {
    return (
        <p>
            {statusCode
                ? `An error ${statusCode} occurred on server`
                : "An error occurred on client"}
        </p>
    );
}

Error.getInitialProps = ({ res, err }) => {
    const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
    return { statusCode };
};

完整代码： https ://gitlab.com/flakesrc/blog-webstation-next

标签： reactjsnext.js

解决方案

不返回 {post}，而是返回 post.data。它将解决问题。

推荐阅读