Estoy creando un sistema operativo de sitio web en React.js, y tengo un problema al eliminar un elemento de una matriz en handleWindowRemove , elimina todos los demás elementos.
Este es el código de la matriz:
const [openedWindows, setOpenedWindows] = useState([ ]); const handleWindowAdd = () => { setOpenedWindows([...openedWindows, { openedWindow: "" }]); } const handleWindowRemove = (index) => { const list = [...openedWindows]; const i = openedWindows.indexOf(index); list.shift(i, 1); setOpenedWindows(list); //alert(index); }Se supone que el método Shift elimina el primer elemento de la matriz y no toma ningún argumento. En su lugar, podría usar el método de empalme.
Sin embargo, encuentro que el método de filtro funciona mejor aquí:
const handleWindowRemove = (index) => { const updatedList = openedWindows.filter((el, idx) => idx !== index); setOpenedWindows(updatedList); }Creo que estás buscando Array.prototype.splice .
Array.shift elimina el primer elemento de una matriz.
Aquí hay un ejemplo corregido:
const [openedWindows, setOpenedWindows] = useState([ ]); const handleWindowAdd = () => { setOpenedWindows([...openedWindows, { openedWindow: "" }]); } const handleWindowRemove = (index) => { const list = [...openedWindows]; const i = openedWindows.indexOf(index); list.splice(i, 1); setOpenedWindows(list); //alert(index); }Si está tratando con una lista de elementos de matriz, no se recomienda en absoluto usar un índice para identificar un elemento para realizar alguna operación, especialmente eliminar.
Dado que está pasando 'índice' como argumento para 'handleWindowRemove', asumo que está usando 'índice' como clave mientras representa la lista de elementos. Siempre que realice una operación de eliminación en un elemento usando "empalme" o cualquier otro método usando 'índice', también dará como resultado un cambio de índice de otros elementos presentes en Array. Si está utilizando el índice como clave mientras procesa la lista de elementos de la matriz, cada vez que elimine un elemento en la matriz usando el índice, el índice de los elementos restantes cambiará y hará que se vuelvan a procesar casi todos los elementos presentes en la matriz. Este no es el enfoque recomendado, ya que volverá a representar los elementos que no se modifican.
Un mejor enfoque sería tener propiedades 'id' para todos los objetos de Array. En este enfoque, 'id' se puede usar como clave durante la representación y también como identificador al eliminar el objeto de la matriz. Debido a esto, otros objetos de ventana no se verán afectados. Por lo tanto, no se volverá a renderizar objetos no modificados.
const openedWindows = [{'id': # identifier, 'windowObject': ...}]