Saya telah memperhatikan masalah menarik dalam proyek Bereaksi saya. Saya telah memecahkan masalah dengan mengikuti pendekatan pertama tetapi saya ingin mengetahui perbedaan antara pendekatan panggilan balik berikut saat meneruskan sebagai penyangga:

1. Fungsi panah (berfungsi dengan baik di dalam render())

    changeImage={ () => this.handleImageUploadModal('OPEN') }

2. Referensi fungsi (Uncaught RangeError: Ukuran tumpukan panggilan maksimum terlampaui)

    changeImage={ this.handleImageUploadModal('OPEN') }
0
Sibasish Mohanty 28 Oktober 2019, 16:12

2 jawaban

Jawaban Terbaik

Yang pertama adalah definisi fungsi, Anda menyuruhnya untuk "melakukan fungsi ini saat berubah". Kata yang penting adalah 'definisi': Anda tidak mengeksekusinya, Anda mendefinisikannya. Itu tidak memiliki perintah 'mulai':

changeImage={ () => {return this.handleImageUploadModal('OPEN')}() }
// If you want it called instantly, you have to start it:     --^^

Yang kedua Anda harus membaca sebagai parameter. Contoh yang lebih jelas:

showImage={ this.shouldImageBeShown() }

Fungsi itu akan dipanggil secara instan untuk menentukan apakah kita harus menampilkan gambar atau tidak, dan mengembalikan true/false -> showImage={true}.

Jika Anda ingin memasukkan nama fungsi tanpa dipicu, Anda dapat menghapus bagian () dari fungsi tersebut sehingga tidak dipanggil, hanya dideklarasikan:

changeImage={ this.openImageUploadModal }
1
Martijn 28 Oktober 2019, 13:23

changeImage={ this.handleImageUploadModal('OPEN') }

Ini berarti "segera panggil handleImageUploadModal, dan berikan nilai pengembaliannya ke prop changeImage". Saya menduga handleImageUploadModal memanggil setState, yang berarti komponen akan dirender dan proses ini berulang.

changeImage={ () => this.handleImageUploadModal('OPEN') }

Ini berarti "buat fungsi dengan teks () => this.handleImageUploadModal('OPEN') dan berikan ke prop changeImage". Fungsi yang baru dibuat tidak dipanggil (belum), tetapi dapat dipanggil kapan pun komponen menganggapnya perlu.

0
Nicholas Tower 28 Oktober 2019, 13:16