Warum erhalte ich in meiner ReactJS-App die Warnung „Eine Komponente ändert eine unkontrollierte Eingabe vom Typ Text in kontrollierten Zustand“?

Unkontrollierte und kontrollierte Eingabeelemente: Eine Anleitung zur ReactJS-Warnung

ReactJS empfiehlt, die Konsistenz im Kontrollzustand von Eingabeelementen aufrechtzuerhalten. In bestimmten Szenarien kann es zu der Warnung kommen: „Eine Komponente ändert eine unkontrollierte Eingabe vom Typ Text in einen zu steuernden Text.“ Lassen Sie uns der Ursache auf den Grund gehen und effektive Lösungen erkunden.

Wurzel des Problems

In ReactJS können Eingabeelemente kontrolliert oder unkontrolliert sein. Eine kontrollierte Eingabe ist eine Eingabe, deren Wert durch den Zustand der Komponente verwaltet wird, während eine unkontrollierte Eingabe es Benutzern ermöglicht, ihren Wert direkt zu ändern. Das Problem entsteht, wenn eine Eingabe, die ursprünglich als unkontrolliert deklariert wurde, später in eine kontrollierte Eingabe umgewandelt wird.

Bedenken Sie den folgenden Code:

<br>class MyComponent erweitert React.Component {<br> Konstruktor(props) {</p>
<pre class="brush:php;toolbar:false">super(props);
this.state = {
  fields: {}
}

}

onChange(field, e){

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

}

render() {

return(
  <div>
    <input
      value={this.state.fields["name"]}
      onChange={this.onChange.bind(this, "name")}
      type="text"
      placeholder="Name *"
    />
  </div>
)

}
}

In diesem Beispiel ist die Eingabe „Name“ unkontrolliert, da ihr Wert anfänglich undefiniert ist (this.state. Felder["Name"]), so dass der Benutzer es frei ändern kann. Wenn der Benutzer jedoch einen Wert eingibt, legt der onChange-Handler this.state.fields.name fest und überführt die Eingabe effektiv in einen kontrollierten Zustand. Dieser Zustandswechsel löst die Warnung aus.

Behebung des Problems

Um die Warnung zu beheben, können Sie entweder:

1. Anfangsfelder im Status definieren: Deklarieren Sie this.state.fields mit einer leeren Zeichenfolge für jedes Feld. Dadurch wird sichergestellt, dass zunächst alle Eingänge angesteuert werden.

   <code class="python">class MyComponent extends React.Component {
     constructor(props) {
    super(props);
    this.state = {
      fields: {
        name: '',
      }
    }
     }
   
     // ...
   }</code>

2. Kurzschlussauswertung verwenden: Wertprop mittels Kurzschlussauswertung zuweisen, wodurch sichergestellt wird, dass keine Definition vorliegt Werte werden zu einer leeren Zeichenfolge ausgewertet.

   <code class="python">value={this.state.fields.name || ''}</code>

Durch die Implementierung einer der beiden Lösungen können Sie den Fehler beseitigen und die Konsistenz des Steuerzustands Ihrer Eingaben sicherstellen.

Das obige ist der detaillierte Inhalt vonWarum erhalte ich in meiner ReactJS-App die Warnung „Eine Komponente ändert eine unkontrollierte Eingabe vom Typ Text in kontrollierten Zustand“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!