如何解决调用 mutate 时 SWR 不会重新渲染
我正在尝试使用 SWR 和 SSR 创建带有分页的产品列表。为了做到这一点,我将初始数据传递给 SWR,当分页发生变化时,我调用一个 mutate 函数,绑定到第一个 SWR 请求。
问题是页面没有重新渲染,当我打印 mutate 函数的结果时,我看到数据已经改变,但页面没有重新渲染,我不明白为什么.
代码:
const ProductList = ({initialData,endpoint,productLimit,productCount}) => {
const [pageIndex,setPageIndex] = useState(1)
const [isLoading,setIsLoading] = useState(false);
console.log(`${endpoint}?_limit=${productLimit}&_start=${pageIndex * productLimit ?? 0}`)
const {data,mutate} = useSWR(
`${endpoint}?_limit=${productLimit}&_start=${pageIndex * productLimit ?? 0}`,fetcher,{initialData: initialData}
)
return (
<div className={cls([styles.product_list_container])}>
<div>
<div className={cls([styles.product_list])}>
{data.map(product => {
return (
<ProductCard productData={product}/>
)
})}
</div>
<Pagination
pageIndex={pageIndex}
onclick={async (index) => {
setPageIndex(index);
setIsLoading(true)
mutate().then(resp => {
setIsLoading(false)
})
}}
pageNumber={Math.ceil(productCount / (productLimit) - 1)}/>
</div>
{isLoading &&
<LoadingBackdrop/>
}
</div>
)
}
解决方法
在提供 initialData
时,您还需要在选项中设置 revalidateOnMount: true
否则它将始终只返回初始数据:
const {data} = useSWR(
`${endpoint}?_limit=${productLimit}&_start=${pageIndex * productLimit ?? 0}`,fetcher,{
initialData: initialData,revalidateOnMount: true,},)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。