React 状态更新（SWR）和组件刷新？

Question

我正在使用 SWR to fetch data as stated in the docs:

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 数据...

Answer 1

我会在本地缓存所有之前获取的页面。使用依赖于 pageIndex 状态和当前 data 值的 useEffect 挂钩，使用当前 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>
}

React 状态更新（SWR）和组件刷新？

React state update (SWR) and component refresh?

javascript

reactjs

next.js

swr