在 url 更改时重新渲染组件

Posted 2023-02-22

【中文标题】在 url 更改时重新渲染组件

【英文标题】：re-render component on url change

【发布时间】：2021-01-27 15:49:05

【问题描述】：

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

在我的导航栏上，我有两个链接：Code Feed（显示所有用户的帖子）和 My Codes（显示当前会话用户的代码） .

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

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

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

【参考方案1】：

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

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

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

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

【参考方案2】：

页面仅在状态或道具发生变化时重新渲染。您可以更改组件内部的某些状态以触发重新渲染。