Bagaimana untuk menukar objek dalam tindak balas

Cara menukar atribut objek dalam React: 1. Tentukan objek dalam keadaan 2. Tambahkan nama dan atribut umur secara dinamik pada objek obj dan mulakan tugasan 3. Gunakan "Object.assign()" kaedah untuk menukar keseluruhan objek.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menukar objek dalam tindak balas?

react setState mengubah suai atribut objek

Oleh kerana kita perlu membuat perubahan pada atribut objek yang ditakrifkan dalam keadaan, kami mendapati setState tidak boleh mengubah suai objek secara langsung di negeri itu dikendalikan.

Lalu apa yang perlu kita lakukan? Jangan kurang sabar, dengar cakap saya perlahan-lahan (saya langsung tak nak dengar cakap karut awak...)

Pertama, kita takrifkan objek dalam keadaan:

this.state = {
obj: {}
}

Langkah seterusnya ialah memberikan obj Objek ini menambahkan atribut nama dan umur secara dinamik dan memulakan tugasan Mengikut ciri setState, atribut obj boleh ditukar terus, jadi kita boleh mencipta objek objek baharu, dinamakan coverObj, dan kemudian. tambahkan nama, atribut umur dan pemulaan pada nilai coverObj, objek obj yang kami dapat pada masa ini adalah sama dengan coverObj! Seperti berikut:

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

Mengikut kaedah di atas, coverObj sebenarnya ditimpa terus ke obj Jika obj sendiri mempunyai atribut lain, ia akan menyebabkan kehilangan atribut lain.

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

Oleh itu, kita perlu menggunakan kaedah Object.assign() untuk menukar keseluruhan objek:

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

Nota 1 dan 2: Nilai pulangan kedua-dua kaedah di atas adalah sama. Oleh kerana sintaks Object.assign merawat parameter pertama sebagai objek sasaran dan beroperasi berdasarkan objek sasaran, yang bermaksud objek sasaran asal akan ditukar, jadi secara amnya apabila menggunakan Object.assign, sasaran akan ditetapkan kepada Objek kosong adalah bersamaan dengan mengembalikan objek baharu.

Seterusnya, kami menukar nilai nama atribut kepada "Merah Kecil". tukar nilai. Tukar nama atribut dalam objek Atribut tertentu:

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}

Pada masa ini, kami telah mencapai tujuan menukar nilai atribut objek.

Object.assign related:

Kaedah Object.assign() digunakan untuk menetapkan nilai semua sifat terhitung daripada satu atau lebih objek sumber kepada objek sasaran. Ia akan mengembalikan objek sasaran.

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

Anda harus tahu tiga perkara tentang setState():

Jangan ubah suai State secara langsung, tetapi Anda harus menggunakan setState():

2. Kemas kini keadaan mungkin tidak segerak

3 Kemas kini negeri akan digabungkan

Kajian yang disyorkan: "tutorial Video reaksi<.>》

Atas ialah kandungan terperinci Bagaimana untuk menukar objek dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!