Warnung: Eine Komponente ändert eine unkontrollierte Eingabe des zu steuernden Texttyps. Eingangselemente sollten nicht von unkontrolliert zu kontrolliert (oder umgekehrt) wechseln. Entscheiden Sie sich für die Lebensdauer der Komponente zwischen der Verwendung eines gesteuerten oder unkontrollierten Eingabeelements. *
Folgendes ist mein 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>
)
}
javascript
reactjs
Riya Kapuria
quelle
quelle
fields
in state?Antworten:
Der Grund ist in dem von Ihnen definierten Zustand:
Felder als leeres Objekt, so dass während des ersten Rendering
this.state.fields.name
werdenundefined
, und das Eingabefeld seinen Wert erhalten als:Dadurch wird das Eingabefeld unkontrolliert.
Sobald Sie einen Wert in die Eingabe eingegeben haben, wird der
fields
Status in geändert in:Zu diesem Zeitpunkt wird das Eingabefeld in eine gesteuerte Komponente umgewandelt. Deshalb erhalten Sie den Fehler:
Mögliche Lösungen:
1- Definieren Sie den
fields
Status in als:2- Oder definieren Sie die Werteigenschaft mithilfe der folgenden Kurzschlussauswertung :
quelle
''
ist ein gültiger Zeichenfolgenwert. Wenn Sie also''
zu 'xyz' wechseln, ändert der Eingabetyp nicht die Mittel, die gesteuert zu gesteuert werden. Im Falle vonundefined
to wechselt derxyz
Typ jedoch von unkontrolliert zu kontrolliert.Durch Ändern
value
indefaultValue
wird das Problem behoben.Hinweis :
Früher habe ich
value={this.state.input ||""}
ininput
dieser Warnung loszuwerden.quelle
Fügen Sie innerhalb der Komponente das Eingabefeld folgendermaßen ein.
quelle
EINFACH müssen Sie zuerst den Anfangszustand einstellen
Wenn Sie den Anfangszustand nicht festlegen, wird durch Reagieren eine unkontrollierte Komponente behandelt
quelle
Zusätzlich zur akzeptierten Antwort muss das Attribut auch null / undefiniert überprüft werden , wenn Sie einen
input
Typcheckbox
oder verwenden .radio
checked
Und wenn Sie TS (oder Babel) verwenden, können Sie anstelle des logischen ODER-Operators nullish coalescing verwenden:
quelle
Stellen Sie zuerst den aktuellen Status ein
...this.state
Dies liegt daran, dass ein neuer Status möglicherweise nicht definiert ist, wenn Sie ihn zuweisen. Daher wird dies behoben, indem der Status so eingestellt wird, dass auch der aktuelle Status extrahiert wird
Wenn sich in Ihrem Status ein Objekt befindet, sollten Sie den Status wie folgt festlegen. Angenommen, Sie müssen den Benutzernamen im Benutzerobjekt festlegen.
quelle
generiert einen Fehler, sobald Sie das Textfeld eingeben
behebt das Problem in diesem Zeichenfolgenbeispiel.
quelle
Wenn Sie mehrere Eingaben in ein Feld verwenden, gehen Sie wie folgt vor: Zum Beispiel:
Suchen Sie Ihr Problem unter:
quelle
Vergessen Sie bei der Verwendung von React Hooks auch nicht, den Anfangswert festzulegen.
Ich benutzte
<input type='datetime-local' value={eventStart} />
und InitialeeventStart
war wieconst [eventStart, setEventStart] = useState();
stattdessen
const [eventStart, setEventStart] = useState('');
.Die leere Zeichenfolge in Klammern ist ein Unterschied.
Wenn Sie das Formular nach dem Senden zurücksetzen, wie ich es tue, müssen Sie es erneut auf eine leere Zeichenfolge setzen, nicht nur auf leere Klammern.
Dies ist nur mein kleiner Beitrag zu diesem Thema, vielleicht hilft es jemandem.
quelle
In meinem Fall war es so ziemlich das, was Mayank Shuklas Top-Antwort sagt. Das einzige Detail war, dass meinem Staat die von mir definierte Eigenschaft völlig fehlte.
Wenn Sie beispielsweise diesen Status haben:
Wenn Sie Ihren Code erweitern, möchten Sie möglicherweise eine neue Requisite hinzufügen, sodass Sie an einer anderen Stelle in Ihrem Code möglicherweise eine neue Eigenschaft erstellen,
c
deren Wert nicht nur für den Status der Komponente undefiniert ist, sondern die Eigenschaft selbst nicht definiert ist.Um dies zu lösen, fügen
c
Sie einfach Ihren Status hinzu und geben Sie ihm einen geeigneten Anfangswert.z.B,
Ich hoffe, ich konnte meinen Randfall erklären.
quelle
Ich erhalte die gleiche Warnung: Eine Komponente ändert eine unkontrollierte Eingabe vom Typ versteckt, um gesteuert zu werden. Ich kann mein Problem nicht beheben. Irgendwelche Ideen warum?
Ich habe es versucht
({ valueName, valueName: {geschlecht=""}, onChangeAllg,})
undvalue={valueName.geschlecht || ""}
quelle
defaultValue={""}
Inneres des TextFields fehlteWarnung: Eine Komponente ändert eine unkontrollierte Eingabe des zu steuernden Texttyps. Eingangselemente sollten nicht von unkontrolliert zu kontrolliert (oder umgekehrt) wechseln. Entscheiden Sie sich für die Lebensdauer der Komponente zwischen der Verwendung eines gesteuerten oder unkontrollierten Eingabeelements.
Lösung: Überprüfen Sie, ob der Wert nicht undefiniert ist
Reagieren Sie / Formik / Bootstrap / TypeScript
Beispiel:
quelle