反应状态更新(SWR)和组件刷新？
反应状态更新(SWR)和组件刷新？
提问于 2021-06-29 00:31:08
我正在使用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数据...
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-29 03:14:41
我会在本地状态下缓存所有之前获取的页面。使用依赖于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>
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68166967
复制相关文章
相似问题
腾讯云开发者
