调用 mutate 时 SWR 不会重新渲染答案

【问题标题】：SWR not re-rendering when mutate is called调用 mutate 时 SWR 不会重新渲染
【发布时间】：2021-06-23 03:23:23
【问题描述】：

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

【问题讨论】：

您阅读过 swr 文档中的 section about pagination 吗？首先，您不应该为此使用mutate。请求页面应该是GET 请求。它不会更新服务器上的任何数据。此外 swr 已经为您提供了加载状态。
是的，我做到了，但是没有 mutate 函数，我什至无法获取新数据，所以我尝试了。感谢关于加载状态的建议
每当提供给useSWR 的url 发生变化时，它都会重新获取数据，并为您提供其加载状态。您只需根据当前页面状态创建带有 start 和 limit 参数的 url，每当用户转到另一个页面时，您只需更新页面状态。突变仅用于更新服务器状态（例如在表单中），这不是您在此处所做的。
是的，现在我明白了，但目前我删除了 mutate 函数，我正在修改 URL 并更新状态，但 SWR 没有获取新数据。
您确认调试工具的网络选项卡中没有发出任何请求吗？更新页面状态时是否确认 url 正确更改？

标签： reactjs next.js server-side-rendering swr

【解决方案1】：

提供initialData时，还需要在选项中设置revalidateOnMount: true，否则总是只会返回初始数据：

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

【讨论】：

@Oddwerth 不客气。如果您认为它解决了您的问题，请将问题标记为已接受的答案和/或投票。
我不能公开投票，因为我没有足够的声誉啊啊啊
@Oddwerth 没关系。只要您有足够的声望，它就会计算在内。