So ändern Sie Objekte in React

So ändern Sie Objektattribute in React: 1. Definieren Sie ein Objekt im Status. 2. Fügen Sie dem Objekt obj dynamisch Namens- und Altersattribute hinzu. 3. Verwenden Sie die Methode „Object.assign()“. gesamtes Objekt Das ist es.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie ändere ich Objekte in Reaktion?

react setState ändert Objekteigenschaften

Da es notwendig ist, die im Status definierten Objekteigenschaften zu ändern, wurde festgestellt, dass setState die Objekteigenschaften im Status nicht direkt bearbeiten kann.

Was sollen wir dann tun? Seien Sie nicht ungeduldig, hören Sie mir langsam zu (ich möchte mir Ihren Unsinn überhaupt nicht anhören ...)

Zuerst definieren wir ein Objekt im Status:

this.state = {
obj: {}
}

Der nächste Schritt besteht darin, den Namen dynamisch hinzuzufügen und Alter zu den Objekt-Obj-Attributen und initialisieren Sie die Zuweisung entsprechend den Eigenschaften von setState, sodass wir ein neues Objektobjekt mit dem Namen coverObj erstellen und dann den Namen, die Altersattribute und die Initiale hinzufügen können Zu diesem Zeitpunkt erhalten wir den Wert von coverObj. Es ist dasselbe wie coverObj! Wie folgt:

let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
this.setState({
obj: coverObj
})

Gemäß der obigen Methode wird coverObj tatsächlich direkt mit obj überschrieben. Wenn obj selbst andere Attribute hat, führt dies zum Verlust anderer Attribute.

this.state = {
obj: {hobby: '游泳'}
}
let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
this.setState({
obj: coverObj
})
// 打印出来的obj是没有hobby属性的

Daher müssen wir die Methode Object.assign() verwenden, um das gesamte Objekt zu ändern:

let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
let data2 = Object.assign(this.state.obj, coverObj)   // 1
// let data2 = Object.assign({}，this.state.obj, coverObj)  // 2
this.setState({
obj: data2
})

Hinweise 1 und 2: Die Rückgabewerte der beiden oben genannten Methoden sind gleich. Da die Syntax von Object.assign den ersten Parameter als Zielobjekt behandelt und auf der Grundlage des Zielobjekts arbeitet, bedeutet dies, dass das ursprüngliche Zielobjekt geändert wird. Bei Verwendung von Object.assign wird das Ziel im Allgemeinen auf festgelegt Ein leeres Objekt entspricht der Rückgabe eines brandneuen Objekts.

Als nächstes ändern wir den Wert des Attributnamens in „Little Red“. Die Voraussetzung ist, dass das zu ändernde Attribut bereits in obj vorhanden ist und der Attributname mit dem Attributnamen des geänderten Werts übereinstimmt ein Attribut im Objekt:

let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
let data2 = Object.assign({}，this.state.obj,coverObj, {name: '小红'}) ;
this.setState({
obj: data2
})
// 打印的 obj: {hobby: '游泳', name: '小红', age: 20}

Zu diesem Zeitpunkt haben wir das Ziel erreicht, den Objektattributwert zu ändern.

Object.assign verwandt:

Die Methode Object.assign() wird verwendet, um die Werte aller aufzählbaren Eigenschaften von einem oder mehreren Quellobjekten einem Zielobjekt zuzuweisen. Es wird das Zielobjekt zurückgegeben.

Syntax: Object.assign(target, ...sources)

Sie sollten drei Dinge über setState():

1 wissen. Ändern Sie State nicht direkt, sondern verwenden Sie setState():

2 kann asynchron sein

3. Zustandsaktualisierungen werden zusammengeführt

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonSo ändern Sie Objekte in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!