Reactjs 尝试递归地呈现注释

这是我的评论数据结构。我认为我使用了错误的数据结构来递归地呈现注释。请告知。我可以得到一个评论和一个回复，但不是未知数量的回复

  "comments": [
    {
      "id": 1,
      "content": "This is so great!",
      "recipe_id": 1,
      "commentable_id": 1,
      "commentable_type": "Recipe",
      "user_id": 1,
      "created_at": "2020-09-08T00:16:55.296Z",
      "updated_at": "2020-09-08T00:16:55.296Z"
    },
    {
      "id": 2,
      "content": "This is another one",
      "recipe_id": 1,
      "commentable_id": 1,
      "commentable_type": "Comment",
      "user_id": 1,
      "created_at": "2020-09-08T00:16:55.323Z",
      "updated_at": "2020-09-08T00:16:55.323Z"
    },
    {
      "id": 3,
      "content": "This is another one",
      "recipe_id": 1,
      "commentable_id": 2,
      "commentable_type": "Comment",
      "user_id": 1,
      "created_at": "2020-09-08T00:16:55.332Z",
      "updated_at": "2020-09-08T00:16:55.332Z"
    },

---

有两种方法可以实现这一点：

您可以将回复存储为注释的子项：

{
  id: 3,
  content: "this is a comment",
  replies: [
    {
      id: 1,
      content: "This is a reply"
    }
]

或者，您可以将回复存储在与评论相同的级别。如果选择此方法，则需要一个reply_to属性，如果它是回复，则该属性应引用注释id；如果它是直接注释而不是回复，则该属性应引用null（或者更好的是，只是未设置）

---

您选择哪种方法将取决于您的其余数据结构和应用程序行为。

假设您从API获得的数据结构是一成不变的，您可以从该平面数据“膨胀”一个注释树。为了缩短时间，我省略了下面的用户id和日期信息

其思想是

将注释列表呈现为

组件；将传递注释的完整列表，以确保

可以对其进行筛选，以查找其呈现的注释的子注释（如果有）

const commentData=[
{
id:1，
内容：“这太棒了！”，
配方编号：1，
可评论的(id):1,，
可注释的_类型：“配方”，
},
{
id:2，
内容：“这是另一个”，
配方编号：1，
可评论的(id):1,，
可注释类型：“注释”，
},
{
id:3，
内容：“这是另一个”，
配方编号：1，
可评论编号：2，
可注释类型：“注释”，
},
];
const CommentBox=（{comment，allComments}）=>{
const children=allComments.filter(
（c） =>c.commentable\u type==“Comment”&&c.commentable\u id===Comment.id
);
返回(

{comment.content}
{children？:null}

);
};
const commentbox=（{comments，allComments}）=>(

{comments.map（（c）=>(
))}

);
常量应用=（）=>{
const rootComments=commentData.filter（（c）=>c.commentable_type==“Recipe”）；
返回；
};
render（，document.getElementById（“根”））

ID为2和ID为3的对象是否是ID为1的对象的子对象？也就是说，对于具有
commentable_type==“Comment”
的对象，
commentable_id
指的是注释id？@AKX对象具有id 2，是id 1的子对象，id 3是id 2的子对象。Commentable_id指正在被评论的评论id。希望这能澄清一点，谢谢大家！这是一个非常有用的解释。我已经在我的应用程序中进行了测试，效果非常好！看到未来如何解决类似挑战的思考过程真是太棒了。你知道我如何在每条评论中给出回复，然后提交回复吗？我尝试过实现它，但它只是无限循环和崩溃。非常感谢。让
同时呈现
（这本身并不表示任何子
CommentBox
es或
CommentBox
es？我想我误解了这个概念，如果我没有正确遵循你的建议，我感到很抱歉。我在CommentBox
中添加了``Reply```并且它不允许我在文本框中输入任何数据进行回复。我不知道什么是
Reply
a。）nd
updateReply
是的，这没有多大帮助…请用完整的修订代码问另一个问题，也许可以链接到这里，这样我可以看一下。