Perbarui status

  • 4 menit

Karena status dalam React tidak dapat diubah, untuk memodifikasi nilai objek stateful, kami menggantinya dengan objek baru. Jadi kita menghindari seluruh kelas bug di mana objek mungkin dalam keadaan tidak valid karena sedang diedit.

Salin objek

Jenis primitif, seperti nilai atau angka Boolean, adalah objek berbasis nilai dibandingkan dengan objek referensi. Jadi setiap perubahan secara otomatis menggantikan seluruh objek.

String berperilaku yang sama karena tidak dapat diubah. Kami memodifikasi string dengan menggantinya dengan nilai baru.

let message = 'Hello, ';
message = message + 'world!';

Ketika kita bekerja dengan objek, kita perlu membuat instans baru untuk memastikan kekekalan. Sintaksis yang paling umum untuk membuat salinan objek adalah sintaks spread, juga disebut operator spread.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = { ...message };

Modifikasi properti individual

Biasanya, kita hanya perlu memperbarui subset properti untuk objek. Membuat salinan dan memodifikasi setiap properti akan menjadi melelahkan.

Dalam sintaks sebelumnya, perhatikan bahwa kami membuat objek JSON baru dengan menggunakan kurung kurawal ({ }). Operator spread dapat digunakan untuk membuat versi awal objek baru. Ini memungkinkan kami untuk menentukan nilai yang diperbarui untuk properti tertentu. Jika kita memiliki nilai baru untuk color tetapi ingin menyimpan teks, misalnya, kita dapat menggunakan kode berikut.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = {
    ...message,
    color: 'green'
};

Di sini, text menyimpan nilai aslinya. Nilai color diperbarui menjadi hijau.

// new object
{
    text: 'Hello, world',
    color: 'green'
}