Como resolver is changing an uncontrolled input no React JS

Neste artigo você aprenderá a como resolver is changing an uncontrolled input, um aviso comum em aplicação React JS!

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Se você já trabalhou com formulários no React JS, pode ter se deparado com um erro ou aviso comum: “Warning: A component is changing an uncontrolled input to be controlled.”

Este aviso pode ser um pouco confuso inicialmente, especialmente se você for novo no React JS. Neste artigo, vamos explorar o que significa este aviso e como você pode resolvê-lo.

Entendendo Inputs Controlados e Não Controlados

Para entender o aviso, precisamos entender a diferença entre um input controlado e não controlado no React JS.

Inputs controlados no React JS são inputs cujo valor é controlado pelo state do componente. Isso significa que o valor do input sempre reflete o que está em seu state correspondente.

import React, { useState } from 'react';

function InputControlado() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

Por outro lado, inputs não controlados são aqueles cujo valor é gerenciado pelo próprio DOM, e não pelo state do componente React. Esses inputs não têm seu valor definido pelo state.

import React from 'react';

function InputNaoControlado() {
  return (
    <input type="text" />
  );
}

Compreendendo o Aviso

O aviso “A component is changing an uncontrolled input to be controlled” ocorre quando um componente muda de um input não controlado para um input controlado, ou vice-versa.

Em outras palavras, se em algum momento a propriedade value de um input é undefined (input não controlado) e depois é atualizada para ter um valor (input controlado), você verá este aviso.

Veja o exemplo a seguir:

import React, { useState } from 'react';

function Exemplo() {
  const [value, setValue] = useState();

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

Neste exemplo, o valor inicial do input é undefined porque não definimos um valor inicial para o nosso state. Isso torna nosso input não controlado.

No entanto, assim que o usuário começa a digitar e aciona o evento onChange, o state é atualizado e o input se torna controlado.

Como Resolver

A solução para este aviso é garantir que o input seja controlado ou não controlado de forma consistente. Se você deseja um input controlado, você deve fornecer um valor inicial para o state.

import React, { useState } from 'react';

function ExemploResolvido() {
  const [value, setValue] = useState(''); // Definimos um valor inicial

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

Com a adição do valor inicial de state, o input é agora consistentemente controlado e o aviso não será mais exibido.

Trabalhando com múltiplos inputs

Em muitos casos, você pode precisar gerenciar múltiplos inputs em um único formulário.

Este processo pode ser simplificado através do uso de um objeto para armazenar todos os valores de input e um único manipulador de mudança.

import React, { useState } from 'react';

function Formulario() {
  const [inputs, setInputs] = useState({ nome: '', email: '' });

  const handleChange = (event) => {
    setInputs({...inputs, [event.target.name]: event.target.value });
  };

  return (
    <form>
      <input type="text" name="nome" value={inputs.nome} onChange={handleChange} />
      <input type="email" name="email" value={inputs.email} onChange={handleChange} />
    </form>
  );
}

Neste exemplo, handleChange é um único manipulador de eventos que funciona para todos os inputs. Ele usa o nome do input para atualizar o valor correspondente no objeto inputs.

Solução para Inputs Controlados com Valores Nulos

Se o valor que você deseja atribuir a um input controlado pode ser nulo ou indefinido, é necessário tratar este caso para evitar que o input mude de controlado para não controlado.

Um jeito de fazer isso é garantir que o valor nunca seja nulo ou indefinido, convertendo-o para uma string vazia se for o caso.

import React, { useState } from 'react';

function InputControlado() {
  const [value, setValue] = useState(null);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value || ''} onChange={handleChange} />
  );
}

No exemplo acima, se o valor for nulo, o valor do input será uma string vazia, evitando assim que o input se torne não controlado.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo sobre como resolver is changing an uncontrolled input!

Gerenciar inputs e formulários em React pode parecer complexo à primeira vista, especialmente quando encontramos avisos como “A component is changing an uncontrolled input to be controlled”.

No entanto, ao compreender os conceitos por trás de inputs controlados e não controlados, podemos evitar esses avisos e criar formulários eficientes e eficazes.

Lembre-se, a consistência é a chave quando se trata de gerenciar inputs no React!

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.