在 history.push 反应之后如何停止重新加载整个组件

Posted 2023-02-22

【中文标题】在 history.push 反应之后如何停止重新加载整个组件

【英文标题】：How to stop reload the entire component , after history.push in react

【发布时间】：2021-11-17 11:49:49

【问题描述】：

我的要求如下，

仪表板页面 (https://localhost:3000) 显示 1000 条记录 用户在仪表板页面上应用了过滤器（过滤器后仅显示 2 条记录） 用户点击行进入详情组件(https://localhost:3000/details/1) 用户点击了详细信息组件上的“返回”按钮 仪表板页面加载（https://localhost:3000）并显示 1000 条记录，我希望这里只显示两行并停止重新渲染组件

我的路线是这样的

 <div>
      <HeaderComponent></HeaderComponent>
      <Route exact path="/" component=Dashboard />
      <Route exact path=Routes.Details component=DetailsComponent />
      <ScrollToTop />
    </div>

【问题讨论】：

重装时不能中途“停止”重装。但是，您可以做的是在 Dashboard 组件中放置一些 if 语句来限制它呈现的内容。如需进一步帮助，请添加相关代码。

您的问题似乎更多的是关于不重新加载数据和重置保存的过滤结果，而不是关于重新渲染。将 1000 条记录和过滤器参数保存到应用程序状态，以便在导航回仪表板时无需重新获取它们。应用程序在切换路线时必然需要重新渲染。

【参考方案1】：

首先，您的 Dashboard 组件应该获得一些参数状态，这些状态将传递给您的 fetch 函数，并将依赖项传递给您的 useEffect 钩子。在仪表板中，您应该有一些类似这样的代码：

const state = useLocation()
const [params, setParams] = useState(state?.params)
const [items, setItems] = useState()

//here you would fetch the relevant data based of change of params
useEffect(() => 
  const data = await fetchItems(params);
  setItems(data)
, [params])

//this would be your filtering function which would trigger the fetch with state change
const updateParams = (newParams) => setParams(previousParams => (...previousParams, newParams))

现在，当您被推送到此路线时，您将拥有基于从 history.push() 或 history.back() 操作传递的参数的项目，如下所示。 （别忘了实现）

history.push("/dashboard", params: /*here put the values that produce the desired items*/)

现在您有一些缓存选项。您可以根据您的状态管理策略缓存参数值或项目本身或它们的 ID 数组（如果需要，您甚至可以在仪表板和详细信息组件之间来回传递它）。例如，您可以有一个 useItems() 钩子，它将参数作为参数，然后返回相关项目。

const [items, setItems] = useItems(params)

在那里，您可以随心所欲地拥有缓存数据，因此如果不需要重新获取，您可以提供这些数据。我自己喜欢的解决方案是使用 react-query，其中您将拥有如下代码：

const state = useLocation()
const [params, setParams] = useState(state?.params)
const data: items = useQuery(["items", params], () => fetchItems(params), keepPreviousData: true)

因此，如果您正确设置 react-query，您将始终缓存您发送到服务器的所有请求的数据，并且除非它们变得陈旧，否则将使用该数据，在这种情况下，它将被重新获取。你可以阅读更多关于它here