Tenho um Context simples criado em um .jx :
UserContext.jx
import React from "react";
const UserContext = React.createContext();
export default UserContext;
No App.js chamo o context atribuindo um useState para uma variavel User que recebera varios parametros, nesse exemplo: nome, password, id, email, isLogged. Com valores iniciais setados.
App.js
export default function App() {
const [user, setUser] = useState({
email: 'email',
password: 'pass',
name: 'name',
id: 'id',
isLogged: true
})
return (
<UserContext.Provider value={{ user, setUser }}>
<AppRoutes isLogged = {user.isLogged} />
</UserContext.Provider>
);
}
Agora eu chamo ele dentro de algumas paginas, como teste para verificar se o context estava funcionando, chamei ele em duas pages: "Reports" e "Home" como mostrado abaixo:
Home.js e Reports.js
...
const {user, setUser} = useContext(UserContext);
...
<h5>{user.name}</h5>
<h5>{user.email}</h5>
<h5>{user.id}</h5>
<h5>{user.isLogged? "Logged": "Not Logged"}</h5>
...
Resultado:
Ou seja, Está pegando tudo certo do context, agora será testar a alteração, criei um botão na pagina reports (como visto na foto), que quando clicado altera o valor de nome para : "Nome alterado".
<input type='button' onClick={() => {
setUser({...user, name: 'Nome alterado'});
}}></input>
Quando clico no botão, o valor da página altera para "nome alterado", mas ao atualizar a pagina ou mudar de pagina, ele retorna para "name", como faço para que esse valor fique salvo no context ? (Eu entendo que em uma nova recompilação, em uma alteração do codigo e etc, os valores vao retornar para o default, mas acredito que não era para voltar para default so de mudar de pagina não ?)