tengo este código https://stackblitz.com/edit/react-wc2ons?file=src%2FSection.js
Tengo secciones y puedo agregar elementos a esas secciones. ¿Cómo puedo eliminar algún elemento? Lo intenté
const removeItem = (i) => { setSections((section) => { const itemTarget = section.items[i]; const filtered = section.items.filter((item) => item !== itemTarget); return { ...section, items: filtered, }; }); };Pero por alguna razón no funciona.
El accesorio de devolución de llamada removeItem que pasa al componente Section es el camino a seguir y también debe deshacerse de pasarle setSections .
removeItem={(i) => removeItem(index, i)} Los componentes secundarios no deberían hacer el trabajo de los padres, por lo que lo hizo bien al principio, lo ayudaré a implementarlo, ya que puedo ver que el controlador removeItem está allí en el componente de la App .
removeItem ya tiene toda la información que necesita, voy a cambiar el nombre de los argumentos para que sea más claro.
const removeItem = (sectionIndex, index) => { const newSections = sections.slice(); const newItems = newSections[sectionIndex].items.slice(); newItems.splice(index, 1); newSections[sectionIndex].items = newItems; setSections(newSections); }; Luego, deshágase de la implementación removeItem en el componente Section y desestructurarlo de los accesorios.
Está utilizando setSections , pero devuelve una sola sección en lugar de una matriz de secciones. Probablemente necesites algo como esto:
// using the `section` variable from the upper scope const removeItem = (i) => { setSections((sections) => { const itemTarget = section.items[i]; const filtered = section.items.filter((item) => item !== itemTarget); const newSections = [...sections]; newSections[section.id] = { ...section, items: filtered, }; return newSections; }); };Algunos consejos (no es necesario que los siga): TypeScript puede evitar tales errores y generar mensajes de error útiles. Immer.js puede simplificar la escritura de dicho código.
Su problema es que la section es una matriz . Por lo tanto, actualmente está accediendo a los items de propiedad no definidos en él. Tendrías que cambiar tu función a algo como esto
const removeItem = (i) => { setSections((section) /* aqui vc tinha chamado de prev*/ => { const itemTarget = section[i].items[j]; const filtered = section[i].items.filter((item) => item !== itemTarget); return [...section, { ...section[i], items: filtered, }] }); }; donde i es la sección en cuestión y j es el elemento que desea eliminar.