Un componente está cambiando una entrada no controlada de texto de tipo para controlar el error en ReactJS

Advertencia: Un componente está cambiando una entrada no controlada de texto de tipo a controlar. Los elementos de entrada no deben cambiar de no controlado a controlado (o viceversa). Decida entre usar un elemento de entrada controlado o no controlado durante la vida útil del componente. *

El siguiente es mi código:

constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
  this.onSubmit = this.onSubmit.bind(this);
}

....

onChange(field, e){
  let fields = this.state.fields;
  fields[field] = e.target.value;
  this.setState({fields});
}

....

render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields["name"]}
        onChange={this.onChange.bind(this, "name")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
      <span style={{color: "red"}}>{this.state.errors["name"]}</span>
    </div>
  )
}

La razón es que, en el estado que definiste:

this.state = { fields: {} }

campos como un objeto en blanco, por lo que durante la primera representación this.state.fields.nameserá undefined, y el campo de entrada obtendrá su valor como:

value={undefined}

Debido a eso, el campo de entrada quedará sin control.

Una vez que ingresa cualquier valor en la entrada, el fieldsestado cambia a:

this.state = { fields: {name: 'xyz'} }

Y en ese momento el campo de entrada se convierte en un componente controlado; es por eso que obtienes el error:

Un componente está cambiando una entrada no controlada de texto de tipo a controlar.

Soluciones posibles:

1- Defina el fieldsestado de entrada como:

this.state = { fields: {name: ''} }

2- O defina la propiedad de valor utilizando la evaluación de cortocircuito de esta manera:

value={this.state.fields.name || ''}   // (undefined || '') = ''

Cambiar valuea defaultValuelo resolverá.

Nota :

defaultValuees solo para la carga inicial. Si desea inicializar, inputentonces debe usar defaultValue, pero si desea usar statepara cambiar el valor, entonces debe usar value. Lea esto para más.

He utilizado value={this.state.input ||""}en inputdeshacerse de esa advertencia.

Dentro del componente coloque el cuadro de entrada de la siguiente manera.

<input className="class-name"
              type= "text"
              id="id-123"
              value={ this.state.value || "" }
              name="field-name"
              placeholder="Enter Name"
              />

SIMPLEMENTE, primero debe establecer el estado inicial

Si no configura el estado inicial, reaccionar lo tratará como un componente no controlado

Además de la respuesta aceptada, si está utilizando un inputtipo checkboxo radio, he descubierto que también necesito verificar el checkedatributo nulo / indefinido .

<input
  id={myId}
  name={myName}
  type="checkbox" // or "radio"
  value={myStateValue || ''}
  checked={someBoolean ? someBoolean : false}
  />

Y si está utilizando TS (o Babel), podría usar la fusión nula en lugar del operador lógico OR:

value={myStateValue ?? ''}
checked={someBoolean ?? false}

Establecer el estado actual primero ...this.state

Es porque cuando va a asignar un nuevo estado puede ser indefinido. por lo que se solucionará estableciendo el estado extrayendo el estado actual

this.setState({...this.state, field})

Si hay un objeto en su estado, debe establecer el estado de la siguiente manera, supongamos que tiene que establecer el nombre de usuario dentro del objeto de usuario.

this.setState({user:{...this.state.user, ['username']: username}})

const [name, setName] = useState()

genera un error tan pronto como escribe en el campo de texto

const [name, setName] = useState('') // <-- by putting in quotes 

solucionará el problema en este ejemplo de cadena.

Si usa múltiples entradas en el campo, siga: Por ejemplo:

class AddUser extends React.Component {
   constructor(props){
     super(props);

     this.state = {
       fields: { UserName: '', Password: '' }
     };
   }

   onChangeField = event => {
    let name = event.target.name;
    let value = event.target.value;
    this.setState(prevState => {
        prevState.fields[name] =  value;
        return {
           fields: prevState.fields
        };
    });
  };

  render() { 
     const { UserName, Password } = this.state.fields;
     return (
         <form>
             <div>
                 <label htmlFor="UserName">UserName</label>
                 <input type="text" 
                        id='UserName' 
                        name='UserName'
                        value={UserName}
                        onChange={this.onChangeField}/>
              </div>
              <div>
                  <label htmlFor="Password">Password</label>
                  <input type="password" 
                         id='Password' 
                         name='Password'
                         value={Password}
                         onChange={this.onChangeField}/>
              </div>
         </form>
     ); 
  }
}

Busque su problema en:

onChangeField = event => {
    let name = event.target.name;
    let value = event.target.value;
    this.setState(prevState => {
        prevState.fields[name] =  value;
        return {
            fields: prevState.fields
        };
    });
};

El uso de React Hooks tampoco se olvida de establecer el valor inicial.
Estaba usando <input type='datetime-local' value={eventStart} />y la inicial eventStartera como

const [eventStart, setEventStart] = useState();
en su lugar
const [eventStart, setEventStart] = useState('');.

La cadena vacía entre paréntesis es la diferencia.
Además, si restablece el formulario después de enviarlo como lo hago, nuevamente debe establecerlo en una cadena vacía, no solo para vaciar los paréntesis.

Esta es solo mi pequeña contribución a este tema, tal vez ayude a alguien.

En mi caso, fue más o menos lo que dice la respuesta principal de Mayank Shukla. El único detalle fue que mi estado carecía por completo de la propiedad que estaba definiendo.

Por ejemplo, si tiene este estado:

state = {
    "a" : "A",
    "b" : "B",
}

Si está expandiendo su código, es posible que desee agregar un nuevo accesorio, por lo tanto, en otro lugar en su código, puede crear una nueva propiedad ccuyo valor no solo esté indefinido en el estado del componente, sino que la propiedad en sí no esté definida.

Para resolver esto, solo asegúrese de agregar ca su estado y darle un valor inicial adecuado.

p.ej,

state = {
    "a" : "A",
    "b" : "B",
    "c" : "C", // added and initialized property!
}

Espero haber podido explicar mi caso límite.

Recibo la misma advertencia: un componente está cambiando una entrada no controlada de tipo oculto para ser controlado. No puedo solucionar mi problema. Alguna idea de por qué?

export default ({  valueName, onChangeAllg,}) => {

          <TextField
            id={"name"}
            select
            label={"name"}
            value={valueName.geschlecht || ""}
            name={"name"}
            onChange={onChangeAllg}

          >
            {nameList.map((option) => (
              <MenuItem key={option.value} value={option.value}>
                {option.label}
              </MenuItem>
            ))}
          </TextField>

lo intenté ({ valueName, valueName: {geschlecht=""}, onChangeAllg,})yvalue={valueName.geschlecht || ""}

Advertencia: Un componente está cambiando una entrada no controlada de texto de tipo a controlar. Los elementos de entrada no deben cambiar de no controlado a controlado (o viceversa). Decida entre usar un elemento de entrada controlado o no controlado durante la vida útil del componente.

Solución: compruebe si el valor no está indefinido

Reaccionar / Formik / Bootstrap / TypeScript

ejemplo:

{ values?.purchaseObligation.remainingYear ?
  <Input
   tag={Field}
   name="purchaseObligation.remainingYear"
   type="text"
   component="input"
  /> : null
}