Estive estudando React e desenvolvendo um app, mas tenho um problema quando tento usar context
. Em um componente, eu crio o contexto e forneço seu valor, mas quando tento usar o valor atual do contexto em outro componente, tenho o valor padrão. Código:
export const OwnerInformationContext = React.createContext({})
function NameChoose() {
...
const [ownerInformation,setOwnerInformation] = useState({})
function onpressSubmitButton(e : FormEvent) {
e.preventDefault();
...
setOwnerInformation({name:'name',roomId:'id',owner:'true'})
}
return(
<div className="page-container">
<OwnerInformationContext.Provider value={ownerInformation} />
...
<form onSubmit={onpressSubmitButton}>
...
</form>
...
);
}
export default NameChoose;
-> No componente acima, o defino e no abaixo tento usá-lo:
import { OwnerInformationContext } from '../NameChoose/index'
function ComponentTwo(){
const consumeOwnerContext = useContext(OwnerInformationContext)
useEffect(() => {
console.log(consumeOwnerContext)
}, [])
return <h1>test</h1>
}
Porém, só consigo ter acesso ao valor padrão, que é {}
ComponentTwo
tivesse acesso as variáveis doNameChoose
, mas que não renderizasse nele, teria algum hook que eu poderia usar ?NameChoose
é para escolha de nome do usuário e outras definições, ai queria pegar essas configurações e passar para oComponentTwo
, porém, já faço isso pelo backend com socket ou então com o sessionStorage, mas gostaria de saber se tinha alguma forma de fazer por hooks, mas pelo visto não há,enfim, obrigado pela atenção!!