Estoy tratando de desarrollar un componente que tenga dos columnas: una desde la que puede agregar algo a una lista y la otra en la que puede ver/modificar elementos que ya están agregados. Quería crear una función que elimine el elemento de la lista usando splice(index, 1) , sin embargo, siempre estaba eliminando elementos de un índice hasta el final. Empecé a depurarlo y tengo un problema que no puedo resolver. Paso una función como accesorio que se supone que debe registrar todos los elementos en un estado de un componente principal. Aquí está mi código:
const ElementCreator = () => { const [elements, setElements] = useState([]); const addElement = () => { const elementsSlice = elements.slice(); const newElement = ( <Example position={elements.length} deleteHandler={handleElementDelete} key={elements.length} /> ); elementsSlice.push(newElement); setElements(elementsSlice); }; const handleElementDelete = (position) => { console.log(elements); }; return ( <Row> <Col> <Button onClick={addElement}>Add Example Element</Button> </Col> <Col> <div>{elements}</div> <Button onClick={() => { setElements([]); }} > Reset </Button> </Col> </Row> ); }; const Example = (props) => { return ( <div> {props.position} <div> <Input type="checkbox" /> <Input type="checkbox" /> <Input type="checkbox" /> </div> <div> <Button onClick={() => { props.deleteHandler(props.position); }} > Delete </Button> <Button>Move Up</Button> <Button>Move down</Button> </div> </div> ); };Cada vez que presiono el botón Eliminar, obtengo resultados diferentes. Así es como se ve la salida de la consola cuando presiono cada botón:
[] react_devtools_backend.js:4049 [{…}] react_devtools_backend.js:4049 (2) [{…}, {…}] react_devtools_backend.js:4049 (3) [{…}, {…}, {…}] react_devtools_backend.js:4049 (4) [{…}, {…}, {…}, {…}]¿Alguien puede decirme por qué registrar lo mismo produce resultados diferentes en cada caso?
Hay un par de problemas con este código...
# 1 está asignando una variable a una matriz con un slice vacío llamado (esto podría introducir errores, y no estoy seguro de por qué necesitaría llamar a esta función vacía) # 2 está pasando la longitud de la matriz, entonces está querer eliminar algo en función de la variable de position que está vinculada a la longitud de esa matriz.
Longitud de la matriz != el último index de una matriz
arr = [0,1,2,3] => arr tiene una length de 4, pero si llamas a arr[4] obtendrías undefined
Dice que está haciendo clic en el botón Agregar, su función está haciendo exactamente lo que se supone que debe hacer => agregar un elemento a su matriz de estado de elementos actual.
const addElement = () => { const elementsSlice = elements.slice(); const newElement = ( <Example position={elements.length} deleteHandler={handleElementDelete} key={elements.length} /> ); elementsSlice.push(newElement); setElements(elementsSlice); };