Bagaimana untuk Mengikat Fungsi dengan Betul dalam Lelaran Peta Reaksi?

Fungsi Mengikat dalam Lelaran Peta Reaksi

Pernyataan Masalah

Apabila menggunakan fungsi peta dalam React, pembangun mungkin menghadapi ralat, "TypeError: Cannot baca sifat yang tidak ditentukan." Ralat ini berlaku apabila kaedah tertentu, seperti onPlayerScoreChange, dipanggil dalam fungsi peta, tetapi ia tidak diikat dengan betul.

Memahami Hierarki Komponen

Dalam aplikasi React yang diberikan, aliran data dan hierarki komponen distrukturkan seperti berikut:

• Komponen Datuk Nenek: Apl berinteraksi dengan komponen cucu dan mengendalikan kaedah onPlayerScoreChange.
• Anak Komponen: Pemain menerima data daripada datuk dan nenek dan menyerahkannya kepada komponen cucu.
• Komponen Cucu: Kaunter mengendalikan input pengguna dan berinteraksi dengan kaedah onPlayerScoreChange dalam komponen datuk dan nenek.

Fungsi Mengikat untuk Fungsi Peta

Ralat timbul kerana kaedah onPlayerScoreChange tidak terikat dengan betul dalam fungsi peta dalam komponen datuk nenek. Pengikatan adalah penting apabila menggunakan fungsi dalam lelaran peta kerana konteks fungsi peta berbeza daripada konteks komponen React. Akibatnya, ini dalam fungsi peta tidak merujuk kepada komponen React, menyebabkan isu akses kepada sifatnya.

Terdapat dua cara biasa untuk menyelesaikannya:

Menggunakan Fungsi Anak Panah

Fungsi anak panah mengikat konteks komponen secara tersirat. Dalam kes ini, kod berikut akan menyelesaikan ralat:

<code class="javascript">{this.state.initialPlayers.map((player, index) => {
                return(
                    <Player 
                    name = {player.name} 
                    score = {player.score} 
                    key = {player.id} 
                    index = {index}
                    onScoreChange = {this.onPlayerScoreChange}
                    />
                )
            })}</code>

Menggunakan Pengikatan Fungsi Secara Eksplisit

Pendekatan lain ialah dengan mengikat fungsi secara eksplisit menggunakan kaedah bind. Ini boleh dicapai dengan menghantar konteks komponen ini sebagai hujah kepada kaedah ikatan:

<code class="javascript">{this.state.initialPlayers.map(function(player, index) {
                return(
                    <Player 
                    name = {player.name} 
                    score = {player.score} 
                    key = {player.id} 
                    index = {index}
                    onScoreChange = {this.onPlayerScoreChange.bind(this)}
                    />
                )
            })}</code>

Dengan menggunakan salah satu kaedah ini untuk mengikat kaedah onPlayerScoreChange dalam lelaran peta, ralat harus diselesaikan .

Atas ialah kandungan terperinci Bagaimana untuk Mengikat Fungsi dengan Betul dalam Lelaran Peta Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!