JS - 删除对象数组中某个对象的子对象

Question

所以这是一个社交媒体评论，有两个家长评论，并且

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"
            }
        }
    ]
}

]

我正在尝试找出如何删除子评论并在相同的 parent>child 设置中返回数组。

现在，在单击评论上的 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 注释相同的数组。我试图删除的评论是 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);
}

Answer 1

我假设您只是用它来删除评论，并且只有一层回复。

您需要做的就是找到

replies

数组并在该数组中找到需要删除的匹配索引。然后使用

splice

将其删除。

reduce

用于查找匹配项，并在找到匹配项时返回回复和索引。累加器

a

设置为匹配项，或者如果未找到匹配项，则累加器保持不变。

const data = [{"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"}}]}]

const idToDelete = 4

let {replies, index} = data.reduce((a, {replies}, index) => (
  index = replies.findIndex(({id}) => id===idToDelete), 
  index===-1 ? a : {replies, index}), undefined)

replies.splice(index, 1)

console.log(data)