调用 mutate 时 SWR 不会重新渲染

Question

我正在尝试使用 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>
    )
}

Answer 1

在提供 initialData 时，您还需要在选项中设置 revalidateOnMount: true 否则它将始终只返回初始数据：

const {data} = useSWR(
    `${endpoint}?_limit=${productLimit}&_start=${pageIndex * productLimit ?? 0}`,
    fetcher,
    {
        initialData: initialData,
        revalidateOnMount: true,
    },
)