next.js 在不重新验证的情况下更改useSWR数据(本地状态)?

bfhwhh0e  于 2023-06-22  发布在  其他
关注(0)|答案(2)|浏览(130)

我从一个公共API中获取了一些数据,这些数据是我使用useSWR获取的,现在我想对其进行操作。以前,我会使用API的响应来调用setState,然后在操作它时,我会用setState覆盖它。
在我的例子中,我想通过按下按钮对数据进行排序。看起来是这样的

function Component() {
   const { data } = useSWR(...)

  function sortData() {
    data.sort(...)
  }
}

如何在不需要useSWR重新验证和获取新数据的情况下修改data?这完全是客户端的需要,API不需要担心这种排序。
谢谢!

i5desfxk

i5desfxk1#

这很难说,因为你没有说是什么导致SWR重新验证,但以下是我知道的主要解决方案:

z9smfwbn

z9smfwbn2#

使用swr v2.0.4,实现此目的的签名是mutate(key, callback, options)
参见文档:www.example.com https://swr.vercel.app/docs/mutation.en-US#parameters

  1. callback:类似于react的useState钩子setState回调,即(prevData) => newData
  2. optionsoptions.revalidatefalse跳过重新验证或获取数据(在下面的示例中)。
import { mutate } from 'swr';

function Component() {
   const { data } = useSWR('key', ...)

  function sortData() {
    mutate('key',
      (prevData) => {
        const sortedData = [...prevData].sort();
        return sortedData
      },
      { revalidate: false } // prevents revalidating the cache
    )

  }
}

我相信你也可以直接从useSWR返回使用mutate(但我不确定API)。大概吧

const { data, mutate } = useSWR(...)
  mutate(
    (prevData) => {
      const sortedData = [...prevData].sort();
      return sortedData
    },
    { revalidate: false } // prevents revalidating the cache
  )

相关问题