Neste artigo você vai aprender a como resolver o erro Resolver erro A component is changing an uncontrolled input of type text to be controlled!
Fala programador(a), beleza? Bora aprender mais sobre React!
Se você já se deparou com o erro “A component is changing an uncontrolled input of type text to be controlled” ao trabalhar com React JS, sabe como pode ser confuso.
No entanto, este erro é mais fácil de resolver do que parece. Vamos descrever por que esse erro ocorre e como você pode consertá-lo.
Por que este erro ocorre?
React JS diferencia entre “input controlado” e “input não controlado”. Um input é dito controlado quando o valor do input é controlado pelo estado do componente.
Isso significa que sempre que o valor do input muda, a mudança é tratada por uma função que atualiza o estado do componente.
Por outro lado, um input não controlado é onde o DOM lida diretamente com o input e o estado do componente não tem controle sobre o input.
O erro ocorre quando um input muda de um estado não controlado para um estado controlado.
Isso pode ocorrer se você inicializar o estado do input como null ou undefined e então tentar atualizar o valor do input com um evento onChange.
Como resolver este erro?
A melhor prática para evitar esse erro é inicializar sempre o estado do input com um valor inicial válido, geralmente uma string vazia. Isso garante que o input seja controlado desde o início.
Usando o Hook useState
Com a introdução dos Hooks no React 16.8, agora é possível usar o estado e outros recursos do React em componentes funcionais.
O Hook de estado é chamado useState. Ele retorna um par: o valor do estado atual e uma função que permite atualizá-lo.
Aqui está um exemplo de como corrigir o erro “A component is changing an uncontrolled input of type text to be controlled” com um componente funcional:
import React, { useState } from 'react';
function MeuComponente() {
const [inputValue, setInputValue] = useState("");
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<input type="text" value={inputValue} onChange={handleChange} />
);
}
Neste exemplo, o estado é inicializado com uma string vazia. Quando o valor do input é alterado, a função handleChange é chamada.
Dentro dessa função, chamamos setInputValue com o novo valor do input. Isso atualiza o estado do componente e mantém o input controlado.
Dicas adicionais
Nesta seção, vamos discutir algumas dicas adicionais que podem ajudar a prevenir erros comuns ao lidar com inputs controlados e não controlados.
1. Use sempre valores padrão
É sempre uma boa prática definir um valor padrão para o estado dos seus inputs. Isso não apenas evita o erro “A component is changing an uncontrolled input of type text to be controlled”, mas também ajuda a prevenir uma série de outros erros potenciais e inesperados.
Um valor padrão pode ser uma string vazia, um número zero ou um valor booleano false.
2. Evite estados não inicializados
Se você estiver utilizando o Hook useState, sempre inicialize o estado.
Mesmo que você não saiba o valor inicial, é melhor definir um valor padrão adequado do que deixá-lo não inicializado.
// Errado
const [value, setValue] = useState();
// Certo
const [value, setValue] = useState("");
3. Use o valor do evento de forma síncrona
Os eventos em React são “pooled”, ou seja, eles são reutilizados para melhorar o desempenho.
Como resultado, você não pode usar o valor do evento de maneira assíncrona, pois o evento será nulo.
Portanto, é importante usar o valor do evento de maneira síncrona.
// Errado
const handleChange = (event) => {
setTimeout(() => {
setValue(event.target.value); // Erro! O evento será nulo.
}, 0);
};
// Certo
const handleChange = (event) => {
const newValue = event.target.value;
setTimeout(() => {
setValue(newValue); // Funciona!
}, 0);
};
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
A diferença entre um input controlado e um input não controlado é uma das muitas nuances de trabalhar com React JS.
Embora possa parecer confuso no início, entender esses conceitos fundamentais é crucial para o desenvolvimento eficaz com React.
Lembre-se sempre de inicializar o estado do input com um valor válido para evitar a mudança de um input não controlado para um controlado.
Utilizar os Hooks como useState em componentes funcionais facilita o gerenciamento do estado do input e evita o erro “A component is changing an uncontrolled input of type text to be controlled”.
React JS é uma biblioteca poderosa para construir interfaces de usuário e, com a compreensão e prática desses conceitos fundamentais, você se tornará mais confortável e eficiente em sua utilização.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.