Bagaimana untuk Menyelesaikan Ralat \'Cannot Read Property of Undefined\' dalam Fungsi peta React?

Memahami Ralat "Cannot Read Property of Undefined" dalam Fungsi peta React

Dalam pembangunan React, adalah perkara biasa untuk menghadapi ralat "TypeError : Tidak boleh membaca sifat 'onPlayerScoreChange' undefined" semasa menggunakan fungsi peta. Isu ini biasanya timbul disebabkan oleh proses pengikatan fungsi peta yang salah.

Konteks

Dalam kod yang disediakan, kami mempunyai struktur komponen hierarki dengan komponen berikut:

• Ibu bapa: Apl
• Anak: Pemain
• Cucu: Kaunter

Kaedah "onPlayerScoreChange" ditakrifkan dalam komponen Apl dan bertujuan untuk mengemas kini skor pemain berdasarkan input pengguna.

Masalahnya

Ralat berlaku dalam fungsi peta komponen "Apl", di mana " onScoreChange" prop diberikan kepada kaedah "onPlayerScoreChange" bagi komponen Apl:

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

Walau bagaimanapun, konteks fungsi peta adalah berbeza daripada konteks komponen React. Akibatnya, "ini" di dalam fungsi merujuk kepada sesuatu selain daripada komponen Apl, menjadikan "this.onPlayerScoreChange" tidak ditentukan.

Penyelesaian

Untuk menyelesaikan masalah ini isu, kita perlu mengikat fungsi peta kepada konteks komponen Apl. Ini boleh dicapai sama ada dengan menggunakan fungsi anak panah (lambda) atau kaedah bind.

Menggunakan Fungsi Anak Panah

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

Fungsi anak panah mengikat nilai "ini" secara automatik kepada skop sekeliling, menghapuskan keperluan untuk pengikatan eksplisit.

Menggunakan Kaedah Bind

{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)}
        />
    )
}.bind(this))}

Kaedah bind secara eksplisit mengikat fungsi peta kepada konteks komponen Apl .

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Ralat \'Cannot Read Property of Undefined\' dalam Fungsi peta React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!