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

react js installation

Question

Advertencia: Un componente está cambiando una entrada no controlada de texto de tipo para ser controlada. 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.

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>
  )
}

Answer 1

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

this.state = { fields: {} }

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

value={undefined}

Debido a ese campo de entrada quedará incontrolado.

Una vez que ingrese cualquier valor en la entrada, los fields en estado se cambian a:

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

Y en ese momento el campo de entrada se convierte en un componente controlado, por eso está recibiendo el error:

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

Soluciones posibles:

1- Defina los fields en estado 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 || '''') = ''''

Answer 2

Establecer el estado actual primero ...this.state

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

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

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

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