Javascript JS—删除对象数组中对象的子对象

所以这是一个社交媒体 comments ，有两个家长 comments ，comment#2有两个子元素 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": "./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"
            }
        }
    "
}

"

我正在试图弄清楚如何删除子注释并在相同的parent>child设置中返回array.

现在，在点击注释上的delete按钮时，我运行一个函数，循环遍历父注释，过滤掉与所点击注释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条注释相同的array.我试图删除的 comments 是id4，并且是一个子 comments .我try 了十几种不同的方法来遍历子 comments ，但我不知道如何只返回与所选 comments id不匹配的子 comments ，并以同样的parent>child方式返回对象(有一次我让它返回一个数组，其子 comments 紧挨着父 comments ，这会搞砸 comments 到页面的映射).

我try 的最后一件事是循环遍历父注释，将它们推送到过滤数组中，然后循环遍历过滤数组中任何注释的子注释.

    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);
}