在 url 更改时重新渲染组件

Question

我是新手，我在重新渲染组件时遇到了一些麻烦。我有带有路由/code/feed?user_id=${id}的CodeFeed组件，它显示一个包含用户帖子的列表。这个列表可以通过user_id过滤。如果 user_id 未定义，将显示所有用户的帖子。

在我的导航栏上，我有两个链接：代码提要（显示所有用户的帖子）和我的代码（显示当前会话用户的代码）。

如果用户点击Code Feed(/code/feed)，该组件将呈现并显示包含所有用户帖子的列表，但如果用户在我的代码 (/code/feed?user_id=session_user) 之后立即点击，则会保留Code Feed 中的内容，因为该组件不会再次呈现以显示新内容。为了显示新内容，组件必须从 url 中获取新的user_id，但只有在再次渲染组件时才会获取。

我正在考虑使用状态并更改路由中的id值。我正在使用useEffect()钩子，并尝试通过将id传递给第二个参数来重新渲染组件。问题是我不知道什么时候是更改 id 值以更改组件状态以便触发渲染的正确时间。

这是我的组件以及到目前为止我尝试做的事情：https : //gist.github.com/dayanamdr/2ac0880aa4d5f969658a6ffede3479bb

Answer 1

使用新的数据更改键重新呈现同一页面

在同一“模板”上设置新键，页面将作为新组件重新安装。这应该会给你带来想要的效果。

in keyReact 标记了一个独特的组件，这就是为什么它在列表中是强制性的，以便 React 可以轻松跟踪每个组件的位置。通过更改组件上的密钥，它将被识别为新组件，因此将卸载旧组件并安装新组件。这在交换使用相同组件的页面时很有帮助。当然，它比仅交换某些组件要重，但如果您的页面不是超级重，那么这种方法应该不会有问题。

const myPage = (props) => {
  
  return (
    <div key={props.uid}>
      {props.children}
    </div>
  )
}