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

Question

我是新来的反应者，重新渲染有一些麻烦。我有一个 CodeFeed 组件，其路由为 / code / feed？user_id = $ {id} ，其中显示了一个包含用户帖子的列表。该列表可以通过 user_id 进行过滤。如果未定义user_id，则将显示所有用户的帖子。

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

如果用户单击代码摘要（/ code / feed），则该组件将呈现并显示包含所有用户帖子的列表，但是如果用户单击我的代码之后（/ code / feed？user_id = session_user），因为该组件将不会再次呈现以显示新内容，因此将保留“代码Feed”中的内容。为了显示新内容，组件必须从URL中获取新的 user_id ，但只有在再次渲染该组件时，它才能获取该内容。

我正在考虑使用状态并更改路线中的 id 的值。我正在使用 useEffect（）挂钩，并且尝试通过将 id 传递给第二个参数来重新呈现组件。问题是，我不知道何时该是更改id的值以更改组件状态的正确时间，以便我可以触发呈现。

这是我的组成部分，也是我到目前为止想要做的事情：https://gist.github.com/dayanamdr/2ac0880aa4d5f969658a6ffede3479bb

Answer 1

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

在相同的“模板”上设置新键，然后页面将重新安装为新组件。这应该给您想要的效果。

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

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

Answer 2

该页面仅在状态或道具更改时才重新呈现。您可以在组件内部更改某些状态以触发重新渲染。

重新呈现网址更改后的组件

2 个答案:

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