Un composant transforme une entrée non contrôlée de type texte en erreur contrôlée dans ReactJS.

Question

Avertissement : Un composant modifie une entrée non contrôlée de type texte pour qu'elle soit contrôlée. Les éléments d'entrée ne doivent pas passer de non contrôlés à contrôlés (ou vice versa). Décidez d'utiliser un élément d'entrée contrôlé ou non contrôlé pendant toute la durée de vie du composant.*

Voici mon code :

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

const [name, setName] = useState()

génère une erreur dès que vous tapez dans le champ de texte

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

corrigera le problème pour cet exemple de chaîne.

Answer 2

Comme mentionné ci-dessus, vous devez définir l'état initial, dans mon cas, j'ai oublié d'ajouter des guillemets ' ' dans setSate() ;

  const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState()
  const [enteredAge, setEnteredAge] = useState()

Donne l'erreur suivante

Le code correct est de simplement définir l'état initial à une chaîne vide ' '.

  const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState('')
  const [enteredAge, setEnteredAge] = useState('')

Answer 3

Définir d'abord l'état actuel ...this.state

C'est parce que lorsque vous allez assigner un nouvel état, il peut être indéfini. Il sera donc corrigé en fixant l'état en extrayant également l'état actuel.

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

S'il y a un objet dans votre état, vous devez définir l'état comme suit, supposons que vous deviez définir le nom d'utilisateur dans l'objet user.

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

Answer 4

Mettre une valeur vide si la valeur n'existe pas ou nulle.

value={ this.state.value || "" }

Answer 5

Si vous utilisez la saisie multiple dans un champ, suivez les instructions : Par exemple :

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

Cherchez votre problème à :

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