import React, { useState } from "react"; const Person = ({ id, name, age, deleteThisPerson }) => { return ( <div className="person"> <p>{name}</p> <p>{age}</p> <button onClick={() => deleteThisPerson(id)}>Delete This Person</button> </div> ); }; const ArrayOfComponents = () => { const deleteThisPersonHandler = (id) => { console.log("[ArrayOfComponents] id : ", id); console.log("[ArrayOfComponents] personArrOfComp : ", personArrOfComp); }; const [personArrOfComp, setPersonArrOfComp] = useState([ <Person id="pc1" key="pc1" name="pc1" age={12} deleteThisPerson={deleteThisPersonHandler} />, ]); const addNewPersonHandler = () => { let r = new Date().getTime(); setPersonArrOfComp((prevState) => { return prevState.concat( <Person id={r} key={r} name={"PCC" + r} age={Math.floor(Math.random() * 100)} deleteThisPerson={deleteThisPersonHandler} /> ); }); }; return ( <div> <button onClick={addNewPersonHandler}>Add New Person</button> {personArrOfComp} </div> ); }; export default ArrayOfComponents;Agregue algunas personas haciendo clic en el botón Agregar nueva persona . Después de eso, al hacer clic en el botón Eliminar esta persona , la función deleteThisPersonHandler muestra el estado anterior, no el estado más actual.
¿Alguien puede explicar este comportamiento de ReactJs? Por qué el estado no se actualiza en la función deleteThisPersonHandler después de agregar una nueva persona.
Es porque está poniendo componentes en estado que hacen referencia a una lambda que se cierra sobre una versión anterior de deleteThisPersonHandler .
Los componentes no son valores de estado de reacción apropiados. El estado debe ser la información más simple posible que su componente necesita almacenar para poder representar la interfaz de usuario. En este caso, probablemente sea una lista de identificaciones.
const [persons, setPersons] = useState(["pc1"]); const addPerson = setPersons([...persons, Date.now()]); return {persons.map(p => <Person id={p} key={p} name={p} age={12} deleteThisPerson={deleteThisPersonHandler} />}; ¡Allí, no hay componentes en el estado! Puede intercambiar las persons escalares con cualquier tipo de objeto complejo que necesite.
Es debido a deleteThisPersonHandler que está pasando como accesorio. En setPersonArrOfComp está configurando un nuevo estado, pero aún no se ha actualizado. Su función deleteThisPersonHandler que está pasando hace referencia al estado actual de personArrOfComp , y no al estado al que está intentando actualizar actualmente. Siempre será el estado anterior.
setPersonArrOfComp((prevState) => { return prevState.concat( <Person id={r} key={r} name={"PCC" + r} age={Math.floor(Math.random() * 100)} deleteThisPerson={deleteThisPersonHandler} /> ); });eso se debe a que usó un console.log() que muestra el estado anterior, no el estado actual, su trabajo ya está hecho pero es la naturaleza de console.log(). para que pueda mostrar su resultado como:
const deleteThisPersonHandler = (id) => { alert("[ArrayOfComponents] id : "+ id); alert("[ArrayOfComponents] personArrOfComp : "+ personArrOfComp);};