Ist es möglich, ein Objekt im Status einer React-Komponente zu speichern? Wenn ja, wie können wir dann den Wert eines Schlüssels in diesem Objekt mit ändern setState
? Ich denke, es ist syntaktisch nicht erlaubt, so etwas zu schreiben wie:
this.setState({ abc.xyz: 'new value' });
In ähnlicher Weise habe ich eine andere Frage: Ist es in Ordnung, eine Reihe von Variablen in einer React-Komponente zu haben, sodass sie in jeder Methode der Komponente verwendet werden können, anstatt sie in einem Zustand zu speichern?
Sie können ein einfaches Objekt erstellen, das alle diese Variablen enthält, und es auf Komponentenebene platzieren, genau wie Sie Methoden für die Komponente deklarieren würden.
Es ist sehr wahrscheinlich, dass Sie auf Situationen stoßen, in denen Sie viel Geschäftslogik in Ihren Code aufnehmen. Dazu müssen viele Variablen verwendet werden, deren Werte durch verschiedene Methoden geändert werden. Anschließend ändern Sie den Status der Komponente basierend auf diesen Werten.
Anstatt alle diese Variablen im Status zu belassen, behalten Sie nur die Variablen bei, deren Werte direkt in der Benutzeroberfläche wiedergegeben werden sollen.
Wenn dieser Ansatz besser ist als die erste Frage, die ich hier geschrieben habe, muss ich kein Objekt im Status speichern.
quelle
this.state
undrender()
jederzeit anzurufen, wenn Sie etwas daran ändern. Wird das unter erfahrenen React-Entwicklern als absolutes No-No angesehen?forceUpdate()
wenn sich bestimmte Felder eines Backbone-Modells geändert haben. Aus diesem Grund kann ich einfach überschreibenshouldComponentUpdate
, um false zurückzugeben.render
erzeugt immer noch die gleiche Ausgabe für den gleichenprops
und "Zustand" (dh die Backbone-Modelle, in denen ich nichts speicherethis.state
).require('react-addons-update')
und natürlich installieren.this.setState({ abc.xyz: 'new value' });
Syntax ist nicht erlaubt. Sie müssen das gesamte Objekt übergeben.this.setState({abc: {xyz: 'new value'}});
Wenn Sie andere Variablen in abc haben
var abc = this.state.abc; abc.xyz = 'new value'; this.setState({abc: abc});
Sie können gewöhnliche Variablen haben, wenn sie nicht auf this.props und angewiesen sind
this.state
.quelle
this.setState({abc: _.extend(this.state.abc, {xyz: 'new value'})});
update
leistungsfähiger, da es Befehle zum Ändern komplexer Objekte innerhalb des Status unterstützt. Wenn Sie diese speziellen Funktionen nicht benötigen, bietet sie meiner Meinung nach_.extend
eine viel sauberere Syntax, insbesondere für jemanden, der den Code später liest und mit dessen Zweck nicht vertraut istupdate
.Object.assign
Ihrem hinzuzufügen, können Sie verwenden, wenn Ihr Browser ES6 unterstützt (oder nur eine Polyfüllung verwenden)var abc = this.state.abc; abc.xyz = 'new value';
ist das gleiche wiethis.state.abc.xyz='new value'
abc
gibt nur primitive Felder, sollte die richtige erste Zeile lautenvar abc = { ...this.state.abc };
Sie können ES6-Spread für vorherige Werte im Objekt verwenden, um ein Überschreiben zu vermeiden
this.setState({ abc: { ...this.state.abc, xyz: 'new value' } });
quelle
this.setState({abc: {xyz: 'new value'}});
wird NICHT funktionieren, dastate.abc
vollständig überschrieben, nicht zusammengeführt wird.Das funktioniert bei mir:
this.setState((previousState) => { previousState.abc.xyz = 'blurg'; return previousState; });
Sofern ich die Dokumente nicht falsch lese, empfiehlt Facebook das oben genannte Format. https://facebook.github.io/react/docs/component-api.html
Außerdem ist der direkteste Weg ohne Mutationsstatus das direkte Kopieren mit dem ES6-Spread / Rest-Operator:
const newState = { ...this.state.abc }; // deconstruct state.abc into a new object-- effectively making a copy newState.xyz = 'blurg'; this.setState(newState);
quelle
componentDidUpdate()
und er hat den vorherigen Status korrekt beibehalten, während erthis.setState({[abc.xyz]: 'blurg'})
den falschen vorherigen Status angegeben hat. Ich gehe also davon aus, dass er gut ist....this.state.abc
kopiert nur "Methoden", die über Objektliterale definiert sind (da diese aufzählbar sind), aber keine Methoden, die über den "Klassen" -Mechanismus herausgefordert wurden (da diese nicht aufzählbar sind).previousState.abc.xyz = 'blurg';
mutiert den aktuellen Zustand, der ein Anti-Muster in React ist.Obwohl dies über einen Unveränderlichkeitshelfer oder ähnliches möglich ist, möchte ich meinem Code keine externen Abhängigkeiten hinzufügen, es sei denn, ich muss es wirklich tun. Wenn ich es tun muss, benutze ich
Object.assign
. Code:this.setState({ abc : Object.assign({}, this.state.abc , {xyz: 'new value'})})
Kann auch für HTML-Ereignisattribute verwendet werden, Beispiel:
onChange={e => this.setState({ abc : Object.assign({}, this.state.abc, {xyz : 'new value'})})}
quelle
Einfachere Möglichkeit, dies in einer Codezeile zu tun
this.setState({ object: { ...this.state.object, objectVarToChange: newData } })
quelle