-1

我的要求如下，

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

这就是我的路线

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

1 回答 1

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，您将始终缓存已发送到服务器的所有请求的数据，并且除非它们变得陈旧，否则将使用该数据，在这种情况下，它将被重新获取。你可以在这里阅读更多关于它的信息

于 2021-09-24T08:00:18.570 回答