Tengo Array que contiene muchas matrices que contienen {id y contenido}.
Ejemplo: [Array(1), Array(1), Array(1)].
Estoy tratando de eliminar Array con ID param. Se elimina, pero el estado de Array.Length no cambia porque solo eliminé el elemento de la matriz, no la totalidad de una matriz.
Lo que quiero hacer es eliminar () -> que el resultado debería ser
[[Array(1), Array(1)]
¿Lo que obtuve? [Array(0), Array(1), Array(1)]
Hay un código de lo que intenté hacer:
return ( <div> <h1>{tasks.length}</h1> {tasks.map((task) => { return (<div> {task.map((con) => { return (<div> <h3 className="hrandom">{con.content} <button type="button" class="btn btn-danger" onClick={() => { deleted(con.id) }}>Delete</button></h3> </div> ) })} </div>) }) } </div>)Y la función de borrar:
const deleted = (id) => { Axios.delete('http://localhost:3001/api/delete/', { data: { id: id } }).then((res) => { console.log(res.data) }); const b = tasks.map((tod) => tod.filter((i) => i.id !== id )); setTasks(b); };En su map , está eliminando los elementos de la matriz interna pero no la matriz externa en sí. Podría hacer esto en una sola línea, pero para simplificar y facilitar la lectura, agregue un segundo filter a la matriz externa:
const b = tasks.map((tod) => tod.filter((i) => i.id !== id )).filter(arr => arr.length > 0); Esto eliminará las matrices internas que se hayan vaciado, de una manera muy legible. Sin embargo, teniendo en cuenta que la matriz interna siempre tiene una longitud 1 , podría desestructurarse limpiamente así:
const b = tasks.filter(([{ id: inner }]) => inner !== id); La sintaxis de desestructuración toma la propiedad id del objeto que es el primer elemento de la matriz interna y la compara con id .
Por tu ejemplo; en lugar de usar un filter dentro de una función de map , que aún devuelve una matriz de la misma longitud, debe usar la función de filter para filtrar la matriz principal directamente:
const b = tasks.filter((tod) => tod.findIndex((i) => i.id === id ) < 0); Sin embargo, si solo hay una entrada de matriz que contendrá esa id , el filtro puede no ser la mejor opción, ya que recorrerá toda la matriz de tasks , incluso si la id ya se ha encontrado. En tal caso, recomendaría primero encontrar el índice del elemento que contiene una matriz con la id y usar array.splice para eliminarlo de la matriz de tasks de la siguiente manera:
const index = tasks.findIndex((tod) => tod.findIndex((i) => i.id === id ) > -1); if (index > 0) { tasks.splice(index, 1); }