Hay otros subprocesos de desbordamiento de pila que están relacionados con esta pregunta pero tienen un título vago o una respuesta breve. Así que quería crear uno que resolviera de manera más explícita y simple el problema que ocurre al cambiar un state que es un object .
Observe que estoy actualizando al hacer clic en la propiedad firstName del objeto de user , que es un estado y no sucede nada. Aquí está el código:
const App = () => { const [user, setUser] = React.useState({ firstName: "Jhon", lastName: "Doe", tel:"09004345000" }); const changeFirstAndLastName = () => { const newUser = user; newUser.firstName = "David"; setUser(newUser); }; return ( <div> <div> <p>First Name: {user.firstName}</p> <p>Last Name: {user.lastName}</p> <p>Tel: {user.tel}</p> </div> <button onClick={changeFirstAndLastName}> Change First Name </button> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>React no se volverá a renderizar porque es como si nada hubiera cambiado, es decir, cada vez que le das el mismo state a un setState . Para valores primitivos como Number , String y Boolean , es obvio saber si estamos dando un valor diferente o no.
Para valores referenciados como Object y Array , por otro lado, cambiar su content no los marca como diferentes. Debería ser una reference de memoria diferente. Vea su código comentado para entender lo que está haciendo mal:
const newUser = user; // will do a reference copy => newUser == user newUser.firstName = "David"; // will change its content => newUser == user setUser(newUser); // at this point it's like nothing has changedUna solución podría ser el operador de propagación , creará una copia de su objeto existente pero en una nueva referencia de memoria, y luego sobrescribirá las propiedades que desea cambiar:
setUser({...user, firstName: "David"});Encuentre un ejemplo completamente funcional a continuación:
const App = () => { const [user, setUser] = React.useState({ firstName: "Jhon", lastName: "Doe", tel:"09004345000" }); const changeFirstAndLastName = () => { setUser({...user, firstName: "David"}); }; return ( <div> <div> <p>First Name: {user.firstName}</p> <p>Last Name: {user.lastName}</p> <p>Tel: {user.tel}</p> </div> <button onClick={changeFirstAndLastName}> Change First Name </button> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>