Ada beberapa cara untuk melakukan ini, karena pembaruan negara adalah operasi async , jadi untuk memperbarui objek keadaan, kita perlu menggunakan fungsi pembaru dengan setState
.
1- yang paling sederhana:
Pertama buat salinan jasper
lalu lakukan perubahan itu:
this.setState(prevState => {
let jasper = Object.assign({}, prevState.jasper); // creating copy of state variable jasper
jasper.name = 'someothername'; // update the name property, assign a new value
return { jasper }; // return new object jasper object
})
Alih-alih menggunakan Object.assign
kami juga dapat menulis seperti ini:
let jasper = { ...prevState.jasper };
2- Menggunakan operator spread :
this.setState(prevState => ({
jasper: { // object that we want to update
...prevState.jasper, // keep all other key-value pairs
name: 'something' // update the value of specific key
}
}))
Catatan: Object.assign
dan Spread Operator
hanya membuat salinan dangkal , jadi jika Anda telah mendefinisikan objek bersarang atau array objek, Anda memerlukan pendekatan yang berbeda.
Memperbarui objek keadaan tersarang:
Asumsikan Anda telah mendefinisikan status sebagai:
this.state = {
food: {
sandwich: {
capsicum: true,
crackers: true,
mayonnaise: true
},
pizza: {
jalapeno: true,
extraCheese: false
}
}
}
Untuk memperbarui objek pizza ekstraCheese:
this.setState(prevState => ({
food: {
...prevState.food, // copy all other key-value pairs of food object
pizza: { // specific object of food object
...prevState.food.pizza, // copy all pizza key-value pairs
extraCheese: true // update value of specific key
}
}
}))
Memperbarui berbagai objek:
Mari kita asumsikan Anda memiliki aplikasi todo, dan Anda mengelola data dalam formulir ini:
this.state = {
todoItems: [
{
name: 'Learn React Basics',
status: 'pending'
}, {
name: 'Check Codebase',
status: 'pending'
}
]
}
Untuk memperbarui status objek todo apa pun, jalankan peta pada larik dan periksa beberapa nilai unik dari setiap objek, jika ada condition=true
, kembalikan objek baru dengan nilai yang diperbarui, atau objek yang sama.
let key = 2;
this.setState(prevState => ({
todoItems: prevState.todoItems.map(
el => el.key === key? { ...el, status: 'done' }: el
)
}))
Saran: Jika objek tidak memiliki nilai unik, maka gunakan indeks array.
age
properti di dalamnyajasper
.