Anfahrt Bediener Aktualisierung Zustand verbreitet mit React

Question

Ich habe meinen Anfangszustand in einer Komponente wie folgt definiert:

constructor(props) { 
    super(props); 
    //this.state = {count: props.initialCount}; 
    this.state = { 
     timeArray: [], 
     metawords: '', 
     description: '', 
     currentTime: '', 
     inputFieldsDisabled: true 
    } 
} 

Ich habe ein Ereignis, das aufgerufen wird, und ich möchte nur die Metawörter Eigenschaft aktualisieren. Ich dachte, dass der folgende Code funktionieren sollte, tut es aber nicht.

updateInputValue1(evt) { 
    const newMetawords = "abcd"; 
    this.setState(
     [...this.state,{ 
      metawords: evt.target.value 
     }] 
    ); 

Gedanken?

Answer 1

state ein Objekt ist, so ist es die Art und Weise aktualisieren Sie im Moment sind, werden nicht Arbeit.

Sie können einfach aktualisieren nur die Eigenschaft, die Sie benötigen, wie:

this.setState({ 
    metawords: evt.target.value, 
}) 

Da Sie spread Betreiber erwähnt haben, können Sie auch (aber nicht immer notwendig) aktualisieren Sie Ihren Zustand als:

this.setState({ 
    ...this.state, 
    metawords: evt.target.value, 
}) 

oder

this.setState(prevState => ({ 
    ...prevState, 
    metawords: evt.target.value, 
})) 

Sollten Sie weitere Informationen darüber benötigen, empfehle ich Ihnen zu Schauen Sie sich ReactJS documentation an.

Answer 2

Warum nicht einfach:

this.setState({ metawords: evt.target.value }) 

Sie brauchen nicht alle anderen Zustandswerte zu übergeben, geben Sie einfach die Eigenschaft und den neuen Wert, dass Sie aktualisieren möchten. Sie müssen sich während setState nicht um die anderen Statuswerte kümmern, React führt das Zusammenführen durch (Zusammenführen aller anderen Statuswerte und des Status, den Sie aktualisieren möchten).

Für weitere Details überprüfen Sie DOC.

Answer 3

Sie können den Operator spread wie folgt setState verwenden.

this.setState(
     {...this.state, 
      metawords: evt.target.value 
     }) 

jedoch, da Sie nur eine einzige Eigenschaft ändern möchten, dies auch in Ihrem Fall funktioniert:

this.setState({metawords: evt.target.value})