3

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

1 回答 1

3

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

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

编辑 Eager-darwin-qckch

于 2021-03-26T11:24:57.287 回答