Javascript 在React Redux的递归组件中，新的注释回复不断增加

我正在使用React和Redux构建嵌套的注释结构。我有一个问题，整个树被重复多次后，我发布了一个新的答复

我有一组注释，然后使用helper函数将其制作成嵌套格式

下面是递归组件的答案：

App.js

let nestedComments=nestedComments（comments）；
返回(
{nestedComments.map（（comment）=>(
))}
)```
在Comment.jsx中，所有注释都使用如下递归组件以嵌套形式显示：
```;
//Comment.jsx
函数注释（{Comment}）{
const nestedComments=（comment.children | |[]）.map（（comment）=>{
返回；
});
返回(
{console.log（'Rendering a comment'，comment.content）}
{comment.content}
{/*  */}
{nestedComments}
);
}

到目前为止还不错，它以嵌套形式呈现注释，如下所示：

每个评论都有一个组件

CommentReply

，用于加载评论回复框以发布新评论

当有人添加新注释时，我将调用redux上的dispatch，将新注释推送到现有注释数组中

CommentReply.jsx

function handleReply(event, dispatch, parentId) {
  event.preventDefault();
  let comment = {
    id: Date.now(),
    postid: '1',
    parentId: parentId,
    userid: 'user1',
    content: event.target.content.value,
    createdAt: new Date(),
    updatedAt: new Date(),
  };

  dispatch({ type: 'SUBMIT_COMMENT', item: comment });
  console.log('Posting a reply, ', 'comment id', comment.id, 'parent id', comment.parentId);

  event.target.reset();
}

store.js

功能减速机（状态、动作）{
设{type，item}=action；
let comments=[…state.comments]；
如果（类型=='SUBMIT_COMMENT'）{
评论。推送（项目）；
控制台日志（注释）；
返回{
评论，
};
}
返回状态；
}

但当我这样做的时候，它显示如下：

注释树被复制了几次，并被填充

你能帮我解决这个问题吗

整个代码库可以在这里找到

谢谢您的时间。

也许可以帮助，它不会像其他建议那样不必要地重新创建所有评论或变体。也许可以帮助，它不会像其他建议那样不必要地重新创建所有评论或变体。