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>
    )
}

constproductlist=（{initialData，endpoint，productLimit，productCount}）=>{
常量[pageIndex，setPageIndex]=useState（1）
const[isLoading，setIsLoading]=useState（false）；
log（`${endpoint}？\u limit=${productLimit}&\u start=${pageIndex*productLimit？？0}`）
常量{data，mutate}=useSWR(
`${endpoint}？\u limit=${productLimit}&\u start=${pageIndex*productLimit？？0}`，
费彻，
{initialData:initialData}
)
返回(
{data.map（产品=>{
返回(
)
})}
{
setPageIndex（索引）；
setIsLoading（真）
mutate（）。然后（resp=>{
setIsLoading（错误）
})
}}
页码={Math.ceil（productCount/（productLimit）-1}/>
{孤岛加载&&
}
)
}

提供

初始数据时

还需要在选项中设置

重新验证计数：true

，否则它将始终只返回初始数据：

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

---

您是否阅读了swr文档中的说明？首先，你不应该使用

mutate

。请求页面应该是

GET

请求。它不会更新服务器上的任何数据。另外，swr已经为您提供了加载状态。是的，我提供了，但是没有mutate函数，我甚至无法获取新数据，所以我尝试了。感谢您提供有关加载状态的建议每当提供给

useSWR

的url发生更改时，它都会重新提取数据，并提供其加载状态。您只需根据当前页面状态使用start和limit参数创建url，每当用户转到另一个页面时，您只需更新页面状态。突变只用于更新服务器状态（例如，在表单中），这不是您在这里要做的。是的，现在我理解了这一点，但目前我删除了突变函数，我正在修改URL并更新状态，但SWR没有获取新数据。您确认在调试工具的“网络”选项卡中没有提出任何请求吗？您确认url在更新页面状态时正确更改了吗？它工作正常，谢谢@Oddwerth，不客气。如果你认为这个问题解决了你的问题，请将这个问题标记为已接受的答案和/或投票。我不能公开投票，因为我没有足够的声誉ahah@Oddwerth那很好。只要你有足够的声誉，它就会起作用。