为什么我的缓存状态在 SWR 的 mutate 中未定义？

如何解决为什么我的缓存状态在 SWR 的 mutate 中未定义？

我有一个组件可以获取带有帖子的 subreddit 的数据，并且每个帖子都有投票：

const subUrl = `/api/subreddit/findSubreddit?name=${sub}`;

  const { data: fullSub,error } = useSWR(subUrl,fetchData,{
    initialData: props.fullSub,//comes from next.js getServerSideProps
  });

这工作得很好，它可以在屏幕上呈现所有内容。 但是在我的 subredditPost 组件上（我为每个帖子渲染一个 subredditPost），当我点击 upVote 按钮时，我有这个 onClick 函数：

const upVotePost = async (postid,fullSub,subUrl) => {
  console.log("the sub variable is: ",subUrl); //same url as in the main component
  mutate(
    subUrl,async (data) => {
    // this is undefined when I hit on the upVote button
    // Expected: The current state of swr with the key of subUrl
      console.log("cached value: ",data);
      return {
        ...data,posts: data.posts.map((post) => {
          if (post.id === postid) {
            return {
              ...post,Votes: [...post.Votes,{ VoteType: "UPVote" }],};
          } else {
            return post;
          }
        }),};
    },false
  );
  const res = await fetch("/api/post/upVote",{
    method: "POST",headers: {
      "Content-Type": "application/json",},body: JSON.stringify({ postId: postid }),});
  mutate(subUrl);
};

在上面代码的 console.log 中它总是未定义的。所以我收到一个错误，页面上不再呈现任何内容。我究竟做错了什么？如果我使用不同的密钥，我读到它无法获取缓存，但我使用的是相同的密钥。我将 subUrl 从我的主要组件（在那里获取 subreddit）传递到 post 组件（在那里我单击 upVote 按钮）。所以完全一样。

为什么我没有定义？

解决方法

我能够通过为 mutate 提供一个默认值来解决这个问题，如下所示：

mutate(
    sub,async (data = fullSub) => {
      console.log("cached value: ",data);
      return {
        ...data,posts: data.posts.map((post) => {
          if (post.id === postid) {
            return {
              ...post,votes: [...post.votes,{ voteType: "UPVOTE" }],};
          } else {
            return post;
          }
        }),};
    },false
  );

因此，如果异步函数未定义，则为其提供默认值：async (data = fullSub)

那解决了它，但仍然不清楚为什么它是未定义的？也许有人可以回答这个问题。我暂时将其保留，如果没有人有更好的答案，我会标记我的。