He creado mi propio ejemplo a partir de este ejemplo de React-dnd para crear el arrastrar y soltar. He agregado una tarjeta que puede usar la función onRemove para eliminar una tarjeta. Incluso cuando estoy limpiando la matriz de estado con todos los objetos, no veo el efecto de eliminación.
Mi función de eliminación:
const handleRemove = useCallback( (index, item) => { // Delete a value if found, all occurrences update(dustbins, { items: (dustbins) => dustbins && dustbins.filter((arrItem) => arrItem !== item) }); if (dustbins && dustbins.includes(item) && index >= 0) { update(dustbins, { lastDroppedItem: { $splice: [[index, 1]] } }); } // Delete at a specific index, no matter what value is in it // update(dustbins, { lastDroppedItem: { $splice: [[index, 1]] } }); }, [dustbins] );los cubos de basura recibidos en este método están constantemente indefinidos y no estoy seguro de por qué. que básicamente no ejecuta el resto de las declaraciones en este método. ¿Qué estoy haciendo mal aquí?
Otro desafío al que me enfrento aquí es que puedo arrastrar y soltar un elemento, pero esta solución crea duplicados. Intenté usar la función $splice pero eso no funciona ya que Dustbin.jsx usa drop: onDrop, método para manejar la funcionalidad de caída. ¿Cómo puedo eliminar los duplicados?
Gracias
Y finalmente lo hice funcionar. Entonces puedo responder mi propia pregunta aquí.
Estoy usando la función immutabilityHelper $set que es similar a una función set normal.
const indexOf = useCallback(function indexOf(array, item) { for (var i = 0; i < array.length; i++) { console.log("Arr", array[i]); if ( array[i].lastDroppedItem && array[i].lastDroppedItem.name === item.name ) return i; } return -1; }, []); const handleRemove = useCallback( (item) => { const index = indexOf(dustbins, item); console.log("LastDroppedItem Index", index); if (index < 0) return; setDustbins( update(dustbins, { [index]: { lastDroppedItem: { $set: null } } }) ); Primero busco un índice y luego establezco un valor nulo en lastDroppeditem en ese index . Espero que ayude a otros. Enlace a la fuente de trabajo .