Mengapa Fungsi React onClick Saya Menyala pada Render?

React onClick Function Firing on Render

Apabila mencipta komponen React yang menghasilkan senarai objek, adalah perkara biasa untuk menghantar kedua-dua objek dan fungsi untuk memadamkannya sebagai prop. Semasa menggunakan .map() untuk mengulangi objek adalah standard, ia boleh menyebabkan fungsi onClick menyala lebih awal semasa pemaparan.

Dalam kod yang disediakan, isu ini berpunca daripada fakta bahawa removeTaskFunction sedang dipanggil terus dalam pengendali acara onClick. Ini bermakna fungsi itu dilaksanakan sebaik sahaja komponen dipaparkan, bukan apabila butang diklik.

Penyelesaian

Untuk menyelesaikan masalah ini, fungsi harus diluluskan sebagai fungsi anak panah kepada onClick, memastikan ia tidak digunakan sebelum waktunya. Baris yang dibetulkan sepatutnya kelihatan seperti:

<button type="submit" onClick={() => this.props.removeTaskFunction(todo)}>Submit</button>

Fungsi anak panah, diperkenalkan dalam ES6, tangguhkan pelaksanaan sehingga fungsi dipanggil. Dalam React 0.13.3 atau lebih baru, fungsi anak panah disokong sepenuhnya. Dengan menggunakan fungsi anak panah, pengendali onClick hanya akan mencetuskan apabila butang benar-benar diklik, seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Fungsi React onClick Saya Menyala pada Render?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!