Então é uma coisa de comentários de mídia social, com comentários de dois pais e comment#2dois comentários de filhos.
[
{
"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"
}
}
]
}
]
Estou tentando descobrir como excluir um comentário filho e retornar a matriz na mesma configuração pai>filho .
No momento, ao clicar no botão excluir em um comentário, executo uma função que percorre os comentários principais para filtrar qualquer comentário principal que corresponda ao ID do comentário que foi clicado
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);
}
E isso retorna um array idêntico aos comentários data.json originais acima. O comentário que estou tentando excluir é id4 e é um comentário filho. Eu tentei uma dúzia de maneiras diferentes de percorrer os comentários filhos, mas não consigo descobrir como retornar apenas comentários filhos que não correspondem ao ID do comentário selecionado e retornar o objeto da mesma maneira parent>child(em um ponto eu consegui para retornar uma matriz com o comentário filho ao lado dos comentários pai, o que atrapalharia o mapeamento dos comentários para a página).
A última coisa que tentei foi percorrer os comentários principais, enviá-los para a matriz filtrada e, em seguida, percorrer os comentários filhos de quaisquer comentários dentro da matriz filtrada.
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);
}
Caso haja um nível mais profundo de respostas (adicionei o ID do comentário: 5), este código deve tratar recursivamente a exclusão:
Presumo que você esteja usando isso apenas para excluir comentários e que haja apenas um nível de respostas.
Tudo o que você precisa fazer é localizar o
repliesarray e encontrar o índice correspondente dentro do array que requer exclusão. Em seguida, usesplicepara excluí-lo.reduceé usado para encontrar uma correspondência e retornar as respostas e o índice quando a correspondência for encontrada. O acumuladoraestá definido para a correspondência ou, se nenhuma correspondência for encontrada, o acumulador permanece inalterado.