Suppression d'un objet d'un tableau en utilisant des hooks (useState)

Question

J'ai un tableau d'objets. J'ai besoin d'ajouter une fonction pour supprimer un objet de mon tableau sans utiliser le mot-clé "this".

J'ai essayé d'utiliser updateList(list.slice(list.indexOf(e.target.name, 1))). Cela supprime tout sauf le dernier élément dans le tableau et je ne suis pas certain pourquoi.

const defaultList = [
{ name: "ItemOne" },
{ name: "ItemTwo" },
{ name: "ItemThree" }]

const [list, updateList] = useState(defaultList);

const handleRemoveItem = e => {
    updateList(list.slice(list.indexOf(e.target.name, 1)))
}

return (
    {list.map(item => {
        return ( 
            <>
            x 
            {item.name}

        )}
    }

)

PRÉVU: L'élément cliqué sera supprimé de la liste.
ACTUEL : La liste entière est supprimée, à l'exception du dernier élément dans le tableau.

Merci d'avance pour toute contribution!

Answer 1

Cela est dû au fait que à la fois slice et splice renvoient un tableau contenant les éléments supprimés.

Vous devez appliquer un splice à l'array, et puis mettre à jour l'état en utilisant la méthode fournie par le hook

const handleRemoveItem = e => {
    const newArr = [...list];
    newArr.splice(newArr.findIndex(item => item.name === e.target.name), 1)
    updateList(newArr)
}