Creé una matriz vacía usando React State Hook, la matriz comienza vacía y tengo 3 funciones para (agregar a la matriz), (eliminar el último elemento de la matriz) y otra para vaciar la matriz. Las funciones parecen funcionar desde que registré el resultado en la consola. Pero cuando quiero imprimir la matriz en un párrafo, la matriz no se muestra. ¿Puede alguien darme algunos comentarios? Gracias.
El código está debajo
import './counter.css'; import { useState } from 'react'; export default function HandleArray() { const [inicial, handler] = useState([]); function addElement(element) { inicial.push('ok'); handler(inicial); console.log(inicial); } function removeElement() { inicial.pop(); handler(inicial); console.log(inicial); } function reset() { inicial.length = 0; handler(inicial); console.log(inicial); } return ( <div className='card text-bg-light border-success mb-3'> <div className='card-header'>Welcome</div> <div className='card-body'> <h5 className='card-title'>Manipulate the array</h5> <button type='button' className='btn btn-dark ' onClick={addElement}> Insert Element </button> <button type='button' className='btn btn-danger' onClick={removeElement} > Remove Element </button> <button type='button' className='btn btn-warning' onClick={reset}> Reset array </button> //log the array <p className='card-text'>{inicial}</p> </div> </div> ); }En React, no debes mutar el estado. El estado mutante es un antipatrón, no está permitido, un gran no-no (espero haber sido claro en esto). Lo que hace es crear una copia de su estado y llamar al controlador con este nuevo valor.
Por ejemplo:
function addElement(element) { inicial.push('ok'); handler(inicial); console.log(inicial); }Debiera ser:
function addElement(element) { const inicialCopy = [...inicial] //using spread operator to create a new array. You can create a new array using new Array, or any other way. inicialCopy.push(element) handler(inicialCopy) } De esta manera, se llamó al handler con una nueva entidad (una nueva matriz), por lo que podemos continuar. Hay otras formas de hacer esto. Hagamos el siguiente usando una devolución de llamada.
function removeElement() { handler((prevState)=>{ prevState.pop() // prevState now has 1 less element return prevState }); } Mismo principio. Llamas al handler para actualizar el nuevo valor.
Por último, restablecer podría simplemente llamar al handler con una matriz vacía.
function reset() { handler([]); }Ahora, hablemos de otros dos temas. El primero es nombrar. Cuando usa el enlace useState, por convención, el nombre sería algo como esto:
const [property, setProperty] = useState(initialValue)// which in your case: const [initial, setInitial] = useState([]) Por último, colocó console.logs dentro de sus funciones. Esos console.logs registrarán el estado ANTIGUO. No el nuevo.
Si desea tener el nuevo, debe envolverlo en un useEffect y agregar inicial a la matriz de dependencias:
useEffect(()=> { console.log(inicial)}, [inicial]}Espero que ayude.