Cara Mengemas kini Nested State dalam React: Panduan Langkah demi Langkah

Mengemas kini Nested State dalam React

Dalam konteks aplikasi React, anda mungkin menghadapi situasi di mana anda perlu mengemas kini sifat khusus bagi objek keadaan bersarang dalam. Satu senario sedemikian ialah apabila membina borang di mana pengguna boleh mentakrifkan medan dan menentukan pelbagai butiran.

Senario:

Anda mempunyai objek keadaan awal yang mewakili medan borang, di mana setiap satu medan dikenal pasti dengan kunci dan mempunyai sifat seperti nama dan populate_at. Anda ingin membolehkan pengguna mengubah suai sifat ini apabila berinteraksi dengan kawalan borang.

Cabaran:

Menyasarkan objek khusus untuk dikemas kini dalam keadaan boleh mencabar, terutamanya apabila menggunakan objek bersarang.

Penyelesaian:

UntukMengemas kini state.item[1].nama, anda boleh menggunakan langkah berikut:

1. Buat salinan cetek objek keadaan:

<code class="javascript">let items = [...this.state.items];</code>

2. Buat salinan cetek item khusus yang anda ingin kemas kini:

<code class="javascript">let item = {...items[1]};</code>

3. Gantikan sifat yang dikehendaki dalam salinan:

<code class="javascript">item.name = 'newName';</code>

4. Letakkan item yang dikemas kini semula ke dalam salinan objek keadaan:

<code class="javascript">items[1] = item;</code>

5. Tetapkan keadaan kepada salinan yang diubah suai:

<code class="javascript">this.setState({items});</code>

Sebagai alternatif, anda boleh menggabungkan langkah 2 dan 3 ke dalam satu baris:

<code class="javascript">let item = {...items[1], name: 'newName'};</code>

Penyelesaian Satu Talian :

Begini cara anda boleh melaksanakan keseluruhan kemas kini dalam satu baris menggunakan operator spread tatasusunan:

<code class="javascript">this.setState(({items}) => ({
    items: [
        ...items.slice(0, 1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));</code>

Nota:

Ia penting untuk ambil perhatian bahawa objek keadaan dalam contoh anda distrukturkan menggunakan objek biasa. Dalam aplikasi React moden, disyorkan untuk menggunakan cangkuk useState atau Redux untuk pengurusan keadaan.

Atas ialah kandungan terperinci Cara Mengemas kini Nested State dalam React: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!