Quiero eliminar un objeto de una matriz de objetos en otra matriz en React, pero estoy un poco confundido, hasta ahora puedo insertar un objeto en la matriz. Pero un poco confundido sobre cómo eliminarlo por index.
datos
const addValues = [ { "name": "New 1", "Value": [98,15,7,8] }, { "name": "New 2", "Value": [7,18,9,40] }, { "name": "New 3", "Value": [0,19,50,98] }, { "name": "New 4", "Value": [56,89,34,20] }, ] const [value, setValue] = useState([]); const handlePush = () => { setValue(oldArray => [...oldArray, newValue]); }; <div>{addValues?.map((inside, index) => { return ( <React.Fragment key={index}> <p>{inside.name} <button onClick={() => setTags(oldArray => [...oldArray, addValue[index]])}>Add</button></p> </React.Fragment> ) })}</div>Si desea un subconjunto de una matriz inmutable, eso se denomina operación de filter . Y para eliminar un elemento por índice, simplemente desea que la lógica de filtrado filtre un índice específico.
Por ejemplo:
const handleRemove = (removeIndex) => { setValue(oldArray => { return oldArray.filter((value, i) => i !== removeIndex) }) }Puede usar el filtro para generar una nueva matriz sin la posición que deseaba cortar
Como esto:
const filteredArray = items.filter((item, index) => index !== value);Puede usar la función de splice para esto, dado un índice de matriz:
const handleDelete = (arrayIndex) => { setValue(oldArray => oldArray.splice(arrayIndex,1)); };Código interior
const addValues = [ { "name": "New 1", "Value": [98,15,7,8] }, { "name": "New 2", "Value": [7,18,9,40] }, { "name": "New 3", "Value": [0,19,50,98] }, { "name": "New 4", "Value": [56,89,34,20] }, ] const [value, setValue] = useState([]); const handlePush = () => { setValue(oldArray => [...oldArray, newValue]); }; const handleDelete = (arrayIndex) => { setValue(oldArray => oldArray.splice(arrayIndex,1)); }; <div>{addValues?.map((inside, index) => { return ( <React.Fragment key={index}> <p>{inside.name} <button onClick={() => setTags(oldArray => [...oldArray, addValue[index]])}>Add</button></p> </React.Fragment> ) })}</div>