Perubahan tatasusunan tindak balas tidak dikemas kini kerana tugasan tatasusunan dalam js dihantar melalui rujukan ; 3. Gunakan "panes.push({key: panes.length,tab: `${panes.length + 1}`})" untuk menetapkan semula nilai.
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.
Apakah yang perlu saya lakukan jika tatasusunan tindak balas berubah tetapi tidak dikemas kini?
Apabila atribut unsur tatasusunan keadaan dalam tindak balas berubah, halaman setState tidak dikemas kini
Semasa menulis kod, anda akan mendapati bahawa jika anda terus menggunakan push dan lain-lain kaedah untuk menukar keadaan, ia adalah wajar Dalam erti kata lain, push akan mengubah tatasusunan asal, dan tatasusunan harus dikemas kini, tetapi keadaan yang diberikan tidak akan berubah.
Masalah yang saya hadapi hari ini ialah: selepas mengubah suai elemen tatasusunan dalam komponen, data berubah tetapi halaman tidak dipaparkan semula
Dikatakan bahawa ini adalah kerana komponen gagal untuk mengenali perubahan dalam tatasusunan, jadi halaman tidak dipaparkan semula
Jadi selagi komponen merasakan bahawa anda telah berubah, anda boleh mencapai kesan penyegaran
Sebab:
Ini disebabkan oleh js , penetapan tatasusunan dihantar melalui rujukan tatasusunan.push adalah bersamaan dengan menukar terus blok memori yang sepadan dengan tatasusunan, tetapi ingatan tatasusunan yang digunakan untuk. perbandingan dalam tindak balas tidak berubah dan menunjuk ke memori yang sama setState hanya membuat perbandingan yang cetek.
Anda boleh menggunakan operator spread untuk mencipta tatasusunan baharu dan menukar rujukan memori
Keperluan:
Penyelesaian: Tugaskan semula selepas penyahbinaan
const onClick = (key) => {// tab点击函数 if (key === 'addTab') { panes.push({ key: panes.length, tab: `筛选记录${panes.length + 1}` }) setPanes([...panes]) } }
Pembelajaran yang disyorkan: "tutorial video bertindak balas"
Atas ialah kandungan terperinci Perkara yang perlu dilakukan jika perubahan tatasusunan tindak balas tidak dikemas kini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!