Comment changer des objets en réaction

Comment modifier les attributs d'un objet dans React : 1. Définissez un objet dans l'état ; 2. Ajoutez dynamiquement les attributs de nom et d'âge à l'objet obj et initialisez l'affectation ; objet entier C'est tout.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment changer d'objets en réaction ?

react setState modifie les propriétés de l'objet

Puisqu'il est nécessaire de modifier les propriétés de l'objet définies dans l'état, on constate que setState ne peut pas opérer directement sur les propriétés de l'objet dans l'état.

Alors que devons-nous faire ? Ne soyez pas impatient, écoutez-moi lentement (je ne veux pas du tout écouter vos bêtises...)

Tout d'abord, nous définissons un objet dans l'état :

this.state = {
obj: {}
}

L'étape suivante consiste à ajouter dynamiquement un nom et age aux attributs de l'objet obj. et initialiser l'affectation. Selon les caractéristiques de setState, l'attribut obj peut être directement modifié, nous pouvons donc créer un nouvel objet objet, nommé coverObj, puis ajouter le nom, les attributs age et l'initiale. valeur à coverObj À ce stade, l'objet obj que nous obtenons est le même que coverObj ! Comme suit :

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

Selon la méthode ci-dessus, coverObj est en fait écrasé directement par obj. Si obj lui-même a d'autres attributs, cela entraînera la perte d'autres attributs.

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

Par conséquent, nous devons utiliser la méthode Object.assign() pour modifier l'objet entier :

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

Notes 1 et 2 : Les valeurs de retour​​des deux méthodes ci-dessus sont les mêmes. Étant donné que la syntaxe de Object.assign traite le premier paramètre comme l'objet cible et fonctionne sur la base de l'objet cible, ce qui signifie que l'objet cible d'origine sera modifié, donc généralement lors de l'utilisation d'Object.assign, la cible sera définie sur Un objet vide équivaut à renvoyer un tout nouvel objet.

Ensuite, nous modifions la valeur du nom de l'attribut en "Little Red". Le principe est que l'attribut qui doit être modifié existe déjà dans obj et que le nom de l'attribut est cohérent avec le nom de l'attribut de la valeur modifiée. un attribut dans l'objet :

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}

À ce stade, nous avons atteint l'objectif de changer la valeur de l'attribut de l'objet.

Connexe à Object.assign :

La méthode Object.assign() est utilisée pour attribuer les valeurs de toutes les propriétés énumérables d'un ou plusieurs objets source à un objet cible. Il renverra l'objet cible.

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

Vous devez savoir trois choses sur setState() :

1 Ne modifiez pas directement l'état, mais utilisez setState():

2. peut être asynchrone

3. Les mises à jour d'état seront fusionnées

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!