0

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 é {}

7
  • entendeu o exemplo?
    – novic
    Commented 11/10/2020 às 13:39
  • 1
    entendi sim, valeu
    – uKn_70
    Commented 11/10/2020 às 14:34
  • Só uma questão: se eu quisesse que o ComponentTwo tivesse acesso as variáveis do NameChoose, mas que não renderizasse nele, teria algum hook que eu poderia usar ?
    – uKn_70
    Commented 11/10/2020 às 15:47
  • Não tem como, se o estado for local é somente do próprio componente! se o estado é para todos tem que ser Redux ou Context Api.
    – novic
    Commented 11/10/2020 às 16:04
  • 1
    É pq tipo, esse component NameChoose é para escolha de nome do usuário e outras definições, ai queria pegar essas configurações e passar para o ComponentTwo , 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!!
    – uKn_70
    Commented 11/10/2020 às 16:11

1 Resposta 1

0

O seu código está totalmente errado, porque, quando se cria um React.Context significa que deseja que vários componentes compartilhe do mesmo estado, da mesma funções, etc. Para que isso funcione, é criado um Contexto e um Provedor que envolve todos os componentes que precisam utilizar o mesmo código, exemplo mínimo:

const CounterContext = React.createContext();
const CounterProvider = ({children}) => {
  const [counter, setCounter] = 
    React.useState(0);
  return (
    <CounterContext.Provider value={{counter, setCounter}}>
      {children}
    </CounterContext.Provider>
  )
}


const View1 = () => {
  const context = React.useContext(CounterContext);
  return (
    <div>{context.counter}</div>
  )
}

const View2 = () => {
  const context = React.useContext(CounterContext);
  const handleIncrement = () 
    => context.setCounter(state => state + 1);
  const handleDecrement = () 
    => context.setCounter(state => state - 1);
  return (
    <div>
      <button onClick={handleIncrement}>Incrementar</button>
      <button onClick={handleDecrement}>Decrementar</button>
    </div>
  )
}
const View3 = () => {
  const context = React.useContext(CounterContext);
  return (
    <div>{context.counter}</div>
  )
}
const Root = () => {
  return (
    <CounterProvider>
      <View1 />
      <View2 />
      <View3 />
    </CounterProvider>
  )
}

ReactDOM.render( <Root/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

Foi criado um código de um simples contador e uma função para mudar o valor desse contador, 3 componentes View que compartilham do mesmo estado porque estão envolvidos pelo Provider criado.

Referencias:

Observação: além da sua montagem está errada, o seu código está muito mau organizado, isso são fatores importantes mesmo que você seja um iniciante, então preste atenção de não criar um código de formulário por exemplo diretamente dentro do Provider, não é usual e no seu código causou muitos problemas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .