如何使用帶有 SWR 的嵌套數組突變復雜的 object？

Question

TL;博士：

如何在嵌套數組（例如data.posts.votes ）中傳播新的 object 並從data中保留所有現有的 state

完整信息：

我獲取的數據如下所示：

我想要一個投票功能，在上面的截圖中的votes數組中添加一個新的vote object。

我現在真的沒有計划如何在來自swr的變異 function 中執行此操作：

現在我有這樣的但那行不通：

mutate(
    `/api/subreddit/findSubreddit?name=${fullSub.name}`,
    (data) => {
      console.log(data);
      return {
        ...data,
        posts: (data.posts[postid].votes = [
          ...data.posts[postid].votes,
          { voteType: "UPVOTE" },
        ]),
      };
    },
    false
  );

我怎樣才能樂觀地更新這個？

Answer 1

我認為你的方法應該是這樣的：

mutate(
  `/api/subreddit/findSubreddit?name=${fullSub.name}`,
  async (data) => {
    console.log(data);
    return {
      ...data,
      posts: data.posts.map((post) => {
        if (post.id === postid) {
          return {
            ...post,
            votes: [...post.votes, { voteType: "UPVOTE" }],
          };
        } else {
          return post;
        }
      }),
    };
  },
  false
);

Answer 2

嘗試使用immer

produce(data, draft => {
  const post = draft.posts.find( p => p.id === postId);
  post.votes.push(newVote);
})

沒有笨拙的價差，所有這些都是不可變的。