问题描述
我有一个组件可以获取带有帖子的 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)
那解决了它,但仍然不清楚为什么它是未定义的?也许有人可以回答这个问题。我暂时将其保留,如果没有人有更好的答案,我会标记我的。