Tengo una página next.js para mostrar una publicación, como un blog, y uso Link para pasar de una publicación a otra. Para mostrar la publicación adecuada, uso otro componente, algo como esto (tenga en cuenta que corté una gran cantidad de código por simplicidad)

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

lo extraño es que en el componente Post parece que useState no se ejecuta después de la primera vez que cargo la página:

 const Post = props => { const [title, setTitle] = useState(props.post.title); console.log(props.post.title); console.log(title);

aquí cuando cargo la página "directamente" los dos valores son iguales (lo cual está bien). Luego, cuando hago clic en Enlace (en el componente de la página), el segundo archivo console.log muestra el valor del contenido que cargué directamente.

Esto no sucede si elimino Link y dejo <a> , pero, por supuesto, usar Link es más rápido, así que prefiero usarlo.

¿Cómo puedo "forzar" a useState a establecer el valor correcto cada vez que los accesorios han cambiado?