Ein Objekt im Status einer React-Komponente speichern?

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.

Zusätzlich zu Kirans Beitrag gibt es den Update-Helfer (früher ein React- Addon ). Dies kann mit npm mit installiert werdennpm install immutability-helper

import update from 'immutability-helper';

var abc = update(this.state.abc, {
   xyz: {$set: 'foo'}
});

this.setState({abc: abc});

Dadurch wird ein neues Objekt mit dem aktualisierten Wert erstellt, und andere Eigenschaften bleiben unverändert. Dies ist nützlicher, wenn Sie beispielsweise auf ein Array pushen und gleichzeitig einen anderen Wert festlegen müssen. Einige Leute benutzen es überall, weil es Unveränderlichkeit bietet.

Wenn Sie dies tun, können Sie Folgendes tun, um die Leistung von auszugleichen

shouldComponentUpdate: function(nextProps, nextState){
   return this.state.abc !== nextState.abc; 
   // and compare any props that might cause an update
}

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

2. Sie können gewöhnliche Variablen haben, wenn sie nicht auf this.props und angewiesen sind this.state.

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

this.setState({abc: {xyz: 'new value'}});wird NICHT funktionieren, da state.abcvollstä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);

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

Einfachere Möglichkeit, dies in einer Codezeile zu tun

this.setState({ object: { ...this.state.object, objectVarToChange: newData } })