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

Ralat "Cannot Read Property of Undefined" dalam React When Use map

Masalah:

Pengguna menghadapi "TypeError : Tidak dapat membaca sifat 'onPlayerScoreChange' bagi ralat yang tidak ditentukan" dalam apl React, walaupun pengikatan fungsi yang kelihatan betul.

Jawapan:

Isunya terletak pada penggunaan peta apabila melepasi fungsi sebagai harta. Tanpa mengikat fungsi dalam peta, konteks ini berubah dan sifat komponen React menjadi tidak boleh diakses.

Pilihan Mengikat:

Untuk menyelesaikan isu ini, seseorang boleh menggunakan sama ada fungsi anak panah atau fungsi bind untuk mengikat konteks fungsi kepada komponen React.

Fungsi Anak Panah:

<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>

Bind:

<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>

Menggunakan salah satu kaedah pengikatan ini memastikan fungsi tersebut mempunyai konteks yang betul dan boleh mengakses komponen React ini.

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