reactjs - 调用 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>
)
}
解决方案
推荐阅读
- vb.net - 如何检测一个日期字段值晚于/大于另一个日期字段?
- c# - Unity VSCode自动完成智能感知不起作用
- perl - Vcf 到 Bayescan 格式 - perl 脚本无法识别种群
- heroku - 尝试在 Heroku local 上运行基本应用程序
- r - 在 R 中,如何使用正则表达式逐行比较两列中的模式和不匹配行?
- c# - 如何编写一个接受具有“多类型属性”的 Json 的 WebService?
- wpf - WPF将密钥发送到文本框
- xaml - Rider Xamarin xaml:VisualStateManager 中的“字段正常已声明”
- c# - 在sql server的日期时间类型的列中插入null
- python - 熊猫合并不等于