1

我正在使用SWR 来获取文档中所述的数据：

function App () {
  const [pageIndex, setPageIndex] = useState(0);

  // The API URL includes the page index, which is a React state.
  const { data } = useSWR(`/api/data?page=${pageIndex}`, fetcher);

  // ... handle loading and error states

  return <div>
    {data.map(item => <div key={item.id}>{item.name}</div>)}
    <button onClick={() => setPageIndex(pageIndex - 1)}>Previous</button>
    <button onClick={() => setPageIndex(pageIndex + 1)}>Next</button>
  </div>
}

就我而言，唯一的区别是我在同一页面上加载了更多项目（所以更像是无限滚动而不是分页），但问题是：

const { data } = useSWR(`/api/data?page=${pageIndex}`, fetcher);

pageIndex请注意如何根据来自状态的变量获取数据。一旦它改变了一切重新渲染，所以每次用户点击按钮时我总是得到刷新，而不是获得更多项目，然后用户看到初始渲染，然后是新项目。所以简而言之，我想在页面底部加载更多项目，而不是刷新所有内容然后添加项目......我错过了什么？有 useSWRInfinite，但它是同样的故事，它从状态获取 url 数据......

4

1 回答 1

4

我会将所有先前获取的页面缓存在本地状态。使用useEffect依赖于pageIndex状态和当前值的钩子，使用当前作为键data将数据存储在对象中。pageIndex渲染所有获取的页面时，将值数组展平为pages单个可渲染数组。

function App () {
  const [pageIndex, setPageIndex] = useState(0);
  const [pages, setPages] = useState({});

  // The API URL includes the page index, which is a React state.
  const { data } = useSWR(`/api/data?page=${pageIndex}`, fetcher);

  useEffect(() => {
    // cache page in state
    setPages(pages => ({
      [pageIndex]: data,
    }));
  }, [data, pageIndex]);

  // ... handle loading and error states

  // NOTE: pages is an object of arrays, so flatten values to single array to render

  return <div>
    {Object.values(pages).flatten().map(item => (
      <div key={item.id}>{item.name}</div>
    ))}
    <button onClick={() => setPageIndex(page => page - 1)}>Previous</button>
    <button onClick={() => setPageIndex(page => page + 1)}>Next</button>
  </div>
}
于 2021-06-28T19:14:41.240 回答