Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não estou conseguindo usar setState com ContextApi

Meu componente Login está recebendo os dados do meu ContextApi e renderizando corretamente, mas quando eu vou alterar o valor dos inputs, recebo este erro:

Imagem indicando o erro. Diz o seguinte: 'react_devtools_backend.js:4012 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.'Eu sei que esse erro aparece quando eu não defino uma propriedade onChange nos inputs, só que esse não é o meu caso. Irei compartilhar o código de Usuario.js e do componente Login.

Usuario.js:

import { createContext, useState } from 'react';

export const UsuarioContext = createContext();
UsuarioContext.displayName = 'Usuario';

export const UsuarioProvider = ({ children }) => {
    const [nome, setNome] = useState('');
    const [saldo, setSaldo] = useState(0);

    return (
        <UsuarioContext.Provider
            value={{
                nome,
                setNome,
                saldo, 
                setSaldo
            }}
        >
            { children }
        </UsuarioContext.Provider>
    )
}

Códgio do componente Login:

import . . . 
import { UsuarioContext } from 'common/context/Usuario';
import { useContext } from 'react';

function Login() {
  const history = useHistory();
  const {
    nome,
    setNome,
    saldo,
    setSaldo
  } = useContext(UsuarioContext);

  return (
    <Container>
       ...
        <Input
          type="text"
          value={nome}
          onChange={e => setNome(e.target.result)}
        />
     ...  
        <Input
          value={saldo}
          onChange={e => setSaldo(e.target.result)}
          type="number"
          startAdornment={
            <InputAdornment position="start">
              R$
            </InputAdornment>
          }
        ...
    </Container>
  )
};

export default Login;

Acredito que está tudo certo, mas eu continuo recebendo esse erro. Usando o ReactDevTools e inspecionando o contexto de Usuario, eu vejo os 4 valores que eu passei no value do Provider, que são nome, setNome, saldo, setSaldo. Mas quando eu digito algo no input de nome, o nome simplesmente some e o DevTools mostra apenas os outros 3 valores que passei no Provider, a saber, setNome, saldo, setSaldo. Não faço ideia de como se resolve isso. Alguém me ajuda, por favor!

1 resposta
solução!

Já entendi o meu erro, gente. Foi besteira minha. No onChange, ao invés de usar e.target.value, eu estava usando e.target.result. Deve ter sido força do hábito.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software