Estoy tratando de obtener el valor de una variable de gancho useState sin tener esa nueva variable enganchada cuando la variable useState se actualiza (evitando la actualización del valor de newVariable cuando cambia el valor de stateVariable).
Por ejemplo, tengo dos componentes, App y Edit.
Aplicación.js
... import Edit from './edit' ... function App() { const [user, setUser] = useState({ name: "", password: "" }); ... return( ... <Route path="/edit"> <Edit socketConnected={socketConnected} socket={socket} user={user} setUser={setUser} ></Edit> </Route> ... ); }Editar.js
function Edit(props) { const [user, setUser] = [props.user, props.setUser]; const previousName = user.name; // Check this out. ... return ( <label>Your previous name was: {previousName}</label> <input value={user.name} onChange={(e) => { setUser({ ...user, name: e.target.value }) }}></input> ); } De esta manera, debería poder cambiar en vivo la variable user y hacer que el nombre previousName permanezca igual, para que el usuario pueda ver su nombre anterior sin actualizar.
Bueno, probé lo siguiente al asignar el valor de user.name a previousUser :
const previousName = user.name;const previousName = user.name.toString();const previousName = JSON.parse(JSON.stringify(user.name));let userCloned = Object.assign({}, user); const previousName = userCloned.name;let userCloned = { ...user }; const previousName = userCloned.name;let userCloned = { ...user }; const previousName = userCloned.name; Object.freeze(previousName);No tengo ni idea de cómo hacerlo, ya que no importa cómo asigne los valores de estado a una variable normal, TODAVÍA le gusta el enlace setUser, incluso después del análisis JSON, lo que me está volviendo loco y me estoy quedando sin ideas. .
Cualquier ayuda sería apreciada, gracias.
Este es el mejor caso de uso de useRef porque useRef conservará la primera instancia/datos que obtendrá y nunca los cambiará durante el ciclo de vida de la aplicación a menos que se actualice manualmente (ref.current).
const [user, setUser] = useState({ name: "", password: "" }); const prevUsername = useRef(user.name);Nota bene: si también desea obtener el accesorio anterior al igual que componentDidUpdate previusProps antes de realizar alguna actualización, también tenga en cuenta que; si
setUsersedispatchedcon nuevos datos, debe actualizarprevUsername ref/variable. Puedes hacerlo así:
setUser((prevUser)=>{ //here you get the previous user before updating prevUsername.current = prevUser.name; })Si entendí correctamente, básicamente desea copiar user.name de usuario a alguna variable de modo que esa variable ignore las actualizaciones futuras de props.user.name . En tal caso, debe copiar esos accesorios en una variable de estado:
// inside Edit const [previousName, setPreviousName] = useState(props.user.name); De esta manera, el nombre previousName se inicializará con props.user.name cuando ese componente se monte por primera vez. Esta variable de estado ignorará las actualizaciones posteriores de props.user.name .
Solo si desmonta el componente Edit y lo vuelve a montar, copiará props.user.name nuevamente en el nombre previousName .
PD Alternativamente, puede usar useRef en lugar de useState en mi ejemplo