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!

erro A component is changing an uncontrolled input capa

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.

Subscribe
Notify of
guest

0 Comentários
Inline Feedbacks
View all comments