Cara Membetulkan \'TypeError: Tidak Dapat Membaca Sifat Tidak Ditakrifkan\' dengan Fungsi Peta dalam React

Ralat "Cannot Read Property of Undefined" dalam React with Map Function

Dalam aplikasi React, menghadapi mesej ralat "TypeError: Tidak boleh membaca sifat 'onPlayerScoreChange' yang tidak ditentukan " biasanya menunjukkan masalah dengan pengikatan apabila menggunakan fungsi peta. Begini cara untuk menyelesaikan isu ini:

Fungsi peta mencipta tatasusunan baharu dengan mengulang tatasusunan sedia ada dan menggunakan fungsi panggil balik untuk setiap elemen. Dalam fungsi panggil balik, ini merujuk kepada konteks global, bukan konteks komponen React. Oleh itu, tanpa pengikatan yang betul, mengakses sifat komponen React dari dalam fungsi panggil balik akan mengakibatkan ralat "tidak ditentukan".

Untuk menyelesaikannya, anda boleh sama ada menggunakan fungsi anak panah atau mengikat fungsi panggil balik ke React konteks komponen.

Dengan Fungsi Anak Panah:

Fungsi anak panah mewarisi konteks fungsi sekeliling, jadi anda hanya boleh menggunakan fungsi anak panah untuk panggil balik peta:

<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}"></player>
    );
})}</code>

Dengan Bind:

Sebagai alternatif, anda boleh mengikat fungsi panggil balik peta ke konteks komponen React secara manual:

<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)}"></player>
    );
}).bind(this)}</code>

Dengan melaksanakan sama ada daripada kaedah ini, konteks ini akan diikat dengan betul, membolehkan anda mengakses sifat komponen React dalam fungsi panggil balik peta dan mengelakkan ralat "tidak ditentukan".

Atas ialah kandungan terperinci Cara Membetulkan \'TypeError: Tidak Dapat Membaca Sifat Tidak Ditakrifkan\' dengan Fungsi Peta dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!