Object.assign()
adalah solusi yang mudah, tetapi (saat ini) jawaban atas penggunaannya - walaupun baik untuk membuat komponen stateless, akan menyebabkan masalah bagi tujuan OP yang diinginkan untuk menggabungkan duastate
objek.
Dengan dua argumen, Object.assign()
sebenarnya akan bermutasi objek pertama di tempat, mempengaruhi instantiations masa depan.
Ex:
Pertimbangkan dua kemungkinan konfigurasi gaya untuk sebuah kotak:
var styles = {
box: {backgroundColor: 'yellow', height: '100px', width: '200px'},
boxA: {backgroundColor: 'blue'},
};
Jadi kami ingin semua kotak kami memiliki gaya 'kotak' default, tetapi ingin menimpa beberapa dengan warna yang berbeda:
// this will be yellow
<div style={styles.box}></div>
// this will be blue
<div style={Object.assign(styles.box, styles.boxA)}></div>
// this SHOULD be yellow, but it's blue.
<div style={styles.box}></div>
Setelah Object.assign()
dieksekusi, objek 'styles.box' diubah untuk selamanya.
Solusinya adalah dengan mengirimkan objek kosong ke Object.assign()
. Dengan demikian, Anda memberi tahu metode untuk menghasilkan objek BARU dengan objek yang Anda lewati. Seperti itu:
// this will be yellow
<div style={styles.box}></div>
// this will be blue
<div style={Object.assign({}, styles.box, styles.boxA)}></div>
// a beautiful yellow
<div style={styles.box}></div>
Gagasan objek bermutasi di tempat sangat penting untuk Bereaksi, dan penggunaan yang tepat Object.assign()
sangat membantu untuk menggunakan perpustakaan seperti Redux.