0

当页面更改时，会创建新查询并将其数据设置为 initialData。在这种情况下，用户会在获取新查询数据之前看到 initialData：

import React from "react";

import fetch from "../lib/fetch";
import useSWR from "swr";

function Component({ initialData }) {
  const [page, setPage] = React.useState(1);
  const { data } = useSWR(
    `/api/data?page=${page}`,
    { initialData }
  );
  // ...
}
Component.getServerSideProps = async () => {
  const data = await fetch('/api/data?page=1');
  return { initialData: data };
};

我的问题是每次查询新数据时都会使用 initialData 作为后备：

在此处输入图像描述

您对如何防止这种闪烁有任何想法吗？

4

1 回答 1

1

所以在 react-query 中，我认为有多种方法可以避免这种情况：

  1. keepPreviousData: true

这是如何进行分页的主要方式，也反映在文档和示例中。

它将确保当查询键更改时，在进行新的提取时，来自先前查询键的数据会保留在屏幕上。生成的对象将有一个isPreviousData标志设置为true，因此您可以禁用下一个按钮或在转换发生时在其旁边显示一个小的加载微调器。在 ux 中反应悬念将给我们（某时）带来的类似。

  1. 初始数据函数

initialData也接受一个函数，undefined如果您不希望出现初始数据，则可以返回。您可以将其绑定到您的页面作为第一页，例如：

function Component({ initialData }) {
  const [page, setPage] = React.useState(1);
  const { data } = useQuery(
    ['page', id],
    () => fetchPage(id),
    { initialData: () => page === 1 ? initialData : undefined }
  );
}

请记住，loading在过渡时您将有一个微调器，所以我认为这比方法 1 更糟糕。

  1. 由于您initialData来自服务器，因此您可以尝试对整个 queryClient 进行水合。请参阅SSR 上的文档。

initialData与 一起工作得很好keepPreviousData，所以这里是使用文档的示例的代码和框分支initialData（解决方案 1）。我认为这是最好的选择：https ://codesandbox.io/s/happy-murdock-tz22o?file=/pages/index.js

于 2021-05-17T15:19:09.383 回答