Reagieren: können Sie SetState mit vorhandenem Statusobjekt verwenden?

Question

Lets sagen, ich habe eine Komponente reagieren, die einen „Zustand“ mit 10 Feldern hat:

this.state = { 
    field1: 1, 
    field2: 2, 
    ... other fields 
    something: 'a' 
}; 

In einem meiner Event-Handler, ich entscheide, ich möchte einen einzigen Staat Feld aktualisieren. Ist es aus irgendeinem Grund schlecht, so etwas zu tun?

// state has 10 other properties not touched here, and I want them to 
// retain their existing values 
this.state.something = 'b'; 
this.setState(this.state); 

Oder muss ich tun:

this.setState({ 
    field1: this.state.field1, 
    field2: this.state.field2, 
    ... set other fields with current value 
    something: 'b' 
}); 

Ich bin mir bewusst, gibt es Bibliotheken, die es einfach zu kopieren Objektzustand machen, nur gefragt, ob es notwendig ist, das zu tun. Ich sollte auch hinzufügen, dass ich das versucht habe und es scheint zu funktionieren, aber ich habe keine Beispiele online gesehen dies tun, also fragte mich, ob es einen Grund gibt, warum nicht.

Answer 1

NIEMALS thate.state mutieren, da der Aufruf von setState() anschließend die von Ihnen vorgenommene Mutation ersetzen kann. Behandle diesen Zustand so, als wäre er unveränderlich.

Verwendung Object.assign für Klon Objekt

const newState = Object.assign({}, this.state, { 
    something: 'b' 
}) 

this.setState(newState) 

Oder Sie aktuellen Zustand zusammenführen können:

this.setState({ 
    something: 'a', 
    something2: 'b', 
}) 

Answer 2

zu aktualisieren Einfeld Sie Objekt mit diesem Feld übergeben müssen. Reagieren wird es für Sie zusammenführen.

this.setState({something: 'b'}) 

Answer 3

Sie würden alle Mitglieder von State als optional markieren.

interface State { 
    field1?: number, 
    field2?: number, 
} 

Dies ist nicht so unsicher, wie Sie vielleicht denken. TypeScript fügte das Konzept Frische hinzu, um dieses Muster und andere zu unterstützen.

Mehr

Dies wird hier abgedeckt:

https://basarat.gitbooks.io/typescript/content/docs/types/freshness.html#use-case--react-state