How to change objects in react

React method to change object attributes: 1. Define an object in state; 2. Dynamically add name and age attributes to the obj object and initialize the assignment; 3. Use the "Object.assign()" method to change the entire object.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to change objects in react?

react setState modifies object properties

Because we need to change the object properties defined in state, we found that setState cannot directly modify the objects in state. Properties are operated on.

Then what should we do? Don't be impatient, listen to me slowly (I don't want to listen to your nonsense at all...)

First, we define an object in the state:

this.state = {
obj: {}
}

The next step is to give the object obj Dynamically add name and age attributes and initialize the assignment. According to the characteristics of setState, you can directly change the obj attribute, so we can create a new object object, name it coverObj, and then add the name, age attributes and initial value to coverObj. At this time, the obj object we get is the same as coverObj! As follows:

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

According to the above method, coverObj is actually overwritten directly to obj. If obj itself has other attributes, it will cause the loss of other attributes.

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

Therefore, we need to use the Object.assign() method to change the entire object:

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 and 2: The return values ​​​​of the above two methods are the same. Since the syntax of Object.assign treats the first parameter as the target object and operates on the basis of the target object, which means that the original target object will be changed, so generally when using Object.assign, the target will be set to An empty object is equivalent to returning a brand new object.

Next, we change the value of the attribute name to "Little Red". The premise is that the attribute that needs to be changed already exists in obj, and the attribute name is consistent with the attribute name of the changed value. Change the attribute name in the object A certain attribute:

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}

At this time, we have achieved the purpose of changing the object attribute value.

Object.assign related:

The Object.assign() method is used to assign the values ​​of all enumerable properties from one or more source objects to a target object. It will return the target object.

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

You should know three things about setState():

1. Do not modify State directly, but You should use setState():

2. State updates may be asynchronous

3. State updates will be merged

Recommended learning: "react Video tutorial》

The above is the detailed content of How to change objects in react. For more information, please follow other related articles on the PHP Chinese website!