Entonces, estoy intentando eliminar un elemento de una matriz en React, pero después de eliminar (usando empalme) el elemento 2 de [1, 2, 3, 4] vuelve a representar la matriz como [1, 2, 3] (en menos visualmente) pero cuando renderizo una vez más (cerrando la matriz y abriéndola) se muestra correctamente como [1, 3, 4]. No estoy seguro de por qué está haciendo esto y creo que tiene que ver con splice() pero nada más parece estar funcionando. También probé slice() pero tampoco funcionó. Aquí está el código para mi función de eliminación:
const deleteFile = (i) => { console.log(files); const newFiles = [...files]; console.log('before delete:', newFiles); //prints [1, 2, 3, 4] newFiles.splice(i, 1); console.log('after delete:', newFiles); //prints [1, 3, 4] but shows visually as [1, 2, 3] setFiles(newFiles); }Esta puede ser una forma potencial de lograr el objetivo deseado (es decir, eliminar el elemento en el índice i en una matriz llamada files :
const [files, setFiles] = useState([]); const deleteFile = i => setFiles(prev => prev.filter((f, idx) => idx !== i));NOTA: agregue verificación de índice
idebería ser>= 0y< files.length) si es necesario.
Explicación
setFiles se puede usar con una devolución de llamada ( haga clic aquí para obtener más información )prev son los files de matriz existentes.filter con idx para filtrar el elemento en el índice iFragmento de código
const arr = [1, 2, 3, 4]; const deleteItemAt = i => arr.filter((el, idx) => idx !== i); console.log(deleteItemAt(1)); console.log(deleteItemAt(0)); console.log(deleteItemAt(3));