Viniendo del lenguaje C# orientado a objetos basado en clases, puedo asignar un objeto a una variable local para poder usarlo más tarde. Pero en este ejemplo, cuando lo asigno a una variable local, no se procesará. Cuando la consola registre tempPersonObj dentro de handleClick, imprimirá el objeto. Pero imprimirá un objeto vacío dentro de la función PersonDetails .
Aplicación.js
import React, {useState} from "react"; const persons = [ { "name": "Arto Hellas", "number": "040-123456", "count": 3, "id": 1 }, { "name": "Ada Lovelace", "number": "39-44-5323523", "count": 10, "id": 2 }, { "name": "Mary Poppendieck", "number": "39-23-6423122", "count": 17, "id": 3 } ] const PersonDetails = ({person}) => { console.log(person) return ( <div> <p>-----------------</p> <p>{person.name}</p> <p>{person.number}</p> <p>{person.count}</p> </div> ) } const App = () => { const [view, setView] = useState(false) const [personObj, setPersonObj] = useState({}) let tempPersonObj = {}; const handleClick = (person) => { //This will work // setPersonObj(person) //This will not work tempPersonObj = person console.log(tempPersonObj) setView(true) } return ( <div> <h1>List:</h1> {persons.map((person) => { return ( <div key={person.id}> {person.name} {""} <button onClick={() => handleClick(person)}>View</button> </div> )}) } {/* This will work */} {/* {view && <PersonDetails person={tempPersonObj}/>} */} {/* This will not work */} {view && <PersonDetails person={personObj}/>} </div> ); } export default AppLos componentes de React funcionan representando la interfaz de usuario en función del estado y los accesorios. La variable local tempPersonObj no es estado ni accesorios y se vuelve a declarar cada ciclo de renderizado.
En otras palabras, puede mutar tempPersonObj en la devolución de llamada de handleClick y se actualizará, pero cuando se procesa la actualización de estado setView(true) y el componente se vuelve a representar, tempPersonObj se vuelve a declarar como un objeto vacío. Es una variable completamente nueva que no está relacionada con tempPersonObj del ciclo de renderizado anterior.
const App = () => { const [view, setView] = useState(false); const [personObj, setPersonObj] = useState({}); let tempPersonObj = {}; // new variable each render cycle const handleClick = (person) => { //This will work // setPersonObj(person) //This will not work tempPersonObj = person console.log(tempPersonObj) // <-- see object mutation setView(true) } return ( ... tempPersonObj // empty object again on next cycle ... ); } Si necesita actualizar un objeto de person , necesariamente debe ser parte del estado React, por lo que se conserva de un ciclo de procesamiento a otro.
const App = () => { const [view, setView] = useState(false); const [personObj, setPersonObj] = useState({}); const handleClick = (person) => { setPersonObj(person); setView(true); } return ( ... ); }