Die untergeordnete Komponente „Reagieren“ führt dazu, dass übergeordnete Statuselemente gelöscht werden ⇐ JavaScript

[Guest]

Das Ziel
Ich umschließe eine Liste von Nachrichtenelementen mit einer Komponente „ListWrap“. Diese Komponente dient dazu, jedes Element in der Liste zu umschließen und Erkennt, wenn untergeordnete Elemente zur Liste hinzugefügt oder daraus entfernt werden. Es zeigt alle Elemente an, auch wenn sie aus der Liste der übergeordneten Komponenten entfernt wurden, und ändert lediglich die Farbe des Wrappers rot für entfernt oder grün für hinzugefügt.
Dies hat einen größeren Zweck, aber es dient der Demonstration Das Problem ist, dass ich einfach die Wrapper-Farbe anpasse.
Das Problem
Das Problem, mit dem ich konfrontiert bin, ist das beim Entfernen von Elementen Wenn Elemente nicht das letzte Element in der Liste sind, werden auch alle nachfolgenden Elemente entfernt. Wenn also beispielsweise von 3 Elementen Element 2 zum Entfernen ausgewählt wird, werden Element 2 und 3 entfernt.
Ich bin mir nicht sicher, warum das so ist, weil die Liste beim Entfernen der ListWrap-Komponente funktioniert Bußgeld. Wenn Sie ListWrap verwenden und die untergeordneten Requisiten direkt an die Return-Anweisung übergeben, funktioniert es einwandfrei. Wenn ich jedoch versuche, eine geänderte Auswahl an untergeordneten Elementen zurückzugeben, tritt das Problem auf. Mir ist aufgefallen, dass sich dies direkt auf den übergeordneten Nachrichtenstatus auswirkt, sodass es den Anschein hat, dass eine Logik im untergeordneten Element das Löschen der zusätzlichen Listenelemente verursacht, obwohl nur eines zum Löschen ausgewählt ist.
Codesandbox-Beispiel
Das bereitgestellte Beispiel zeigt, dass beim Klicken auf die Schaltfläche zum Schließen/Entfernen eines Elements das erwartete Verhalten darin besteht, dass dieser Wrapper nur rot (links gefärbt) wird Feld), nicht alle unten aufgeführten Elemente.
Test.js

Code: Select all

import React, { useState } from "react";
import ListWrap from "./ListWrap";

const Test = () => {
const [messages, setMessages] = useState([]);

const addMessage = () => {
const id = Date.now();
setMessages([...messages, { id: id, text: `Message ${id}` }]);
};

const removeMessage = (id) => {
setMessages(messages.filter((message) => message.id !== id));
};

return (



Add New

 setMessages(messages.slice(0, -1))}
className="rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600 focus:outline-none"
>
Remove Last

 setMessages([])}
className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600 focus:outline-none"
>
Remove All



{messages.map((message) => (

{message.text}
 removeMessage(message.id)}
className="absolute right-0 top-0 mr-2 mt-2 rounded bg-red-500 px-2 py-1 text-white hover:bg-red-600 focus:outline-none"
>
X


))}



);
};

export default Test;

ListWrap.js

Code: Select all

import React, { useState, useEffect } from "react";

const ListWrap = ({ children }) => {
const [allChildrenItems, setAllChildrenItems] = useState([]);

useEffect(() => {
const newChildren = React.Children.toArray(children);
const newChildrenKeys = newChildren.map((child) => child.key);
const currentChildrenKeys = allChildrenItems.map((item) => item.child.key);
const addedChildrenKeys = newChildrenKeys.filter(
(key) => !currentChildrenKeys.includes(key)
);
const removedChildrenKeys = currentChildrenKeys.filter(
(key) => !newChildrenKeys.includes(key)
);

const updatedChildrenItems = [
...allChildrenItems.map((item) => {
if (removedChildrenKeys.includes(item.child.key))
return { ...item, isActive: false };
return item;
}),
...newChildren
.filter((child) => addedChildrenKeys.includes(child.key))
.map((child) => ({ child, isActive: true })),
];

setAllChildrenItems(updatedChildrenItems);
}, [children]);

//Using a custom item based on the children data IS causing issue with parent messages state:
return (

{allChildrenItems.map((item) =>  (


{item.child}


))}

);
//Using children directly from prop NOT causing issue with parent messages state:
//   return (
//     
//       {children.map((item) => (
//
//           {item}
//         
//       ))}
//     
//   );
// };
};

export default ListWrap;