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:
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!