使用 Link 导航时 next.js 中的 useState (next/link)

Question

我有一个 next.js 页面来显示一个帖子，比如一个博客，我使用链接从一个帖子移动到另一个。 为了显示正确的帖子，我使用了另一个组件，就像这样（请注意，我为了简洁而删减了很多代码）

const Index: NextPage<PageProps> = (props) => {
    const router = useRouter();
    let post = props.post;

        return (
            <>
                <Post post={post}/>
                <Link href={`/post/${encodeURIComponent(props.next.id)}`} passHref={true}>
                    <a>next post</a>
                </Link>
                <Link href={`/post/${encodeURIComponent(props.previous.id)}`} passHref={true}>
                    <a>previous post</a>
                </Link>
                
            </>
        );
};

export default Index;

export const getServerSideProps = async (context) => {
    const session = await getSession(context);
    const pid = context.params.pid;
    let postManager = new PostManager();
    let post = await postManager.getPost(pid);
    let siblings = null;
    if (post) {
        siblings = await postManager.getSiblings(post);
    }

    return {
        props: {
            post: JSON.parse(JSON.stringify(post)),
            next: (siblings && siblings.next) ? JSON.parse(JSON.stringify(siblings.next)) : null,
            previous: (siblings && siblings.previous) ? JSON.parse(JSON.stringify(siblings.previous)) : null,
            session: session,
        }
    };
};

奇怪的是，在我第一次加载页面后，在 Post 组件中似乎没有执行 useState：

const Post = props => {

    const [title, setTitle] = useState(props.post.title);

    console.log(props.post.title);
    console.log(title);

在这里，当我“直接”加载页面时，这两个值是相同的（这很好）。 然后，当我单击链接（在页面组件中）时，第二个 console.log 显示了我直接加载的内容的值。

如果我关闭 Link 并离开<a> ，则不会发生这种情况，但当然使用 Link 更快，所以我更喜欢使用它。

每次道具更改时，如何“强制” useState 设置正确的值？

Answer 1

因为您使用浅层路由停留在同一页面上，所以组件不会重新渲染，但道具会更新。 这是预期的反应/下一个行为。

将以下内容添加到您的 Post 组件中：

  useEffect(() => {
    setTitle(props.post.title);
  }, [props]);

这将在更新道具时更新状态。 如果您有任何问题，请告诉我。