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