如何扁平化React评论区的嵌套状态？

需求说明 #

需要将嵌套结构的评论数据转换为扁平化结构：把原本嵌套在评论replies中的回复对象提取到顶层comments数组，同时原评论的replies字段仅保留回复的id列表，以此简化React状态管理操作。

转换函数实现 #

以下是实现数据扁平化的JavaScript函数：

function flattenComments(originalData) {
  // 复制原始数据结构，避免修改原数据
  const flattenedData = { ...originalData, comments: [] };

  originalData.comments.forEach(comment => {
    // 提取当前评论的所有回复
    const replies = comment.replies || [];
    // 处理当前评论：将replies替换为id数组
    const processedComment = {
      ...comment,
      replies: replies.map(reply => reply.id)
    };
    // 添加处理后的评论到扁平化数组
    flattenedData.comments.push(processedComment);
    // 将所有回复对象直接加入扁平化数组
    flattenedData.comments.push(...replies);
  });

  return flattenedData;
}

// 使用示例
const originalData = {
  "currentUser": {
    "image": { 
      "png": "/src/assets/images/avatars/image-juliusomo.png",
      "webp": "/src/assets/images/avatars/image-juliusomo.webp"
    },
    "username": "juliusomo"
  },
  "comments": [
    {
      "id": 1,
      "content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
      "createdAt": "1 month ago",
      "score": 12,
      "user": {
        "image": { 
          "png": "/src/assets/images/avatars/image-amyrobson.png",
          "webp": "/src/assets/images/avatars/image-amyrobson.webp"
        },
        "username": "amyrobson"
      },
      "replies": []
    },
    {
      "id": 2,
      "content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
      "createdAt": "2 weeks ago",
      "score": 5,
      "user": {
        "image": { 
          "png": "/src/assets/images/avatars/image-maxblagun.png",
          "webp": "/src/assets/images/avatars/image-maxblagun.webp"
        },
        "username": "maxblagun"
      },
      "replies": [
        {
          "id": 3,
          "content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
          "createdAt": "1 week ago",
          "score": 4,
          "replyingTo": "maxblagun",
          "user": {
            "image": { 
              "png": "/src/assets/images/avatars/image-ramsesmiron.png",
              "webp": "/src/assets/images/avatars/image-ramsesmiron.webp"
            },
            "username": "ramsesmiron"
          }
        },
        {
          "id": 4,
          "content": "I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.",
          "createdAt": "2 days ago",
          "score": 2,
          "replyingTo": "ramsesmiron",
          "user": {
            "image": { 
              "png": "/src/assets/images/avatars/image-juliusomo.png",
              "webp": "/src/assets/images/avatars/image-juliusomo.webp"
            },
            "username": "juliusomo"
          }
        }
      ]
    }
  ]
};

const flattenedData = flattenComments(originalData);
console.log(flattenedData);

扁平化后的状态操作优势 #

扁平化结构在React状态管理中更易操作：

• 修改评论内容/分数：通过id直接定位评论对象，无需深层遍历嵌套结构

  setComments(prevComments => prevComments.map(comment => 
    comment.id === 3 ? { ...comment, content: '更新后的内容' } : comment
  ));
  

• 添加新回复：先将新回复对象加入数组，再更新对应父评论的replies id列表

  const newReply = {
    id: 5,
    content: '这是新的回复',
    createdAt: '刚刚',
    score: 0,
    replyingTo: 'maxblagun',
    user: originalData.currentUser
  };
  
  setComments(prevComments => {
    const updatedComments = [...prevComments, newReply];
    return updatedComments.map(comment => 
      comment.id === 2 ? { ...comment, replies: [...comment.replies, 5] } : comment
    );
  });
  

内容的提问来源于stack exchange，提问作者Teaca Sebastian