所以这是一个社交媒体评论，有两个家长评论，还有comment#2两个孩子评论。
[
{
"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": "./images/avatars/image-amyrobson.png",
"webp": "./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": "./images/avatars/image-maxblagun.png",
"webp": "./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": "./images/avatars/image-ramsesmiron.png",
"webp": "./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": "./images/avatars/image-juliusomo.png",
"webp": "./images/avatars/image-juliusomo.webp"
},
"username": "juliusomo"
}
}
]
}
]
我试图弄清楚如何删除子评论并在相同的父>子设置中返回数组。
现在，在单击评论上的删除按钮时，我会运行一个函数，该函数循环访问父评论，以过滤掉与所单击的评论 ID 匹配的任何父评论
let filteredComments = [];
function handleClick(e) {
setLoading(true);
for (let i = 0; i < comments.length; i++) {
if (comments[i].id !== Number(e.target.id)) {
filteredComments = [...filteredComments, comments[i]];
}
}
console.log(filteredComments);
// setComments(...comments, filteredComments);
setTimeout(() => {
setLoading(false);
}, 1000);
}
这会从上面的方式返回与原始data.json注释相同的数组。我试图删除的评论是id4，是一个子评论。我已经尝试了十几种不同的方法来循环子评论，但我不知道如何只返回与所选评论 id 不匹配的子评论并以相同的方式返回对象parent>child（在某一时刻我得到了它返回一个数组，其中子注释位于父注释旁边，这会弄乱将注释映射到页面）。
我尝试的最后一件事是循环遍历父注释，将它们推送到过滤数组，然后循环遍历过滤数组中任何注释的子注释。
let filteredComments = [];
function handleClick(e) {
setLoading(true);
for (let i = 0; i < comments.length; i++) {
if (comments[i].id !== Number(e.target.id)) {
filteredComments = [...filteredComments, comments[i]];
}
}
if (comments[i].replies.length !== 0) {
for (let k = 0; k < comments[i].replies.length; k++) {
if (comments[i].replies[k].id !== Number(e.target.id)) {
filteredComments = [
...filteredComments,
comments[i].replies[k],
];
}
}
}
console.log(filteredComments);
// setComments(...comments, filteredComments);
setTimeout(() => {
setLoading(false);
}, 1000);
}
如果有更深层次的回复（我添加了评论 ID：5），此代码应该递归处理删除：
我假设您只是用它来删除评论，并且只有一层回复。
您需要做的就是找到该
replies数组并在该数组中找到需要删除的匹配索引。然后使用splice删除它。reduce用于查找匹配项，并在找到匹配项时返回回复和索引。累加器a设置为匹配，或者如果未找到匹配，则累加器保持不变。