Rumah >hujung hadapan web >tutorial js >Mengapa React Melemparkan Ralat 'Tidak Dapat Membaca Harta 'setState' Undefined'?

Mengapa React Melemparkan Ralat 'Tidak Dapat Membaca Harta 'setState' Undefined'?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-05 06:28:01453semak imbas

Why Does React Throw a

Memahami Ralat "Cannot Read Property 'setState' of Undefined" dalam React

Apabila bekerja dengan komponen React, anda mungkin menghadapi "Cannot read property 'setState' ralat yang tidak ditentukan". Isu ini timbul apabila cuba mengakses kaedah setState dalam kaedah komponen React, tetapi kaedah itu tidak terikat dengan betul pada contoh komponen.

Atasi Isu Pengikat

Dalam yang disediakan contoh, ralat ini berlaku dalam kaedah delta(). Sebab untuk ini ialah this.delta tidak terikat pada contoh komponen Kaunter. Untuk menyelesaikan masalah ini, gunakan kod berikut dalam pembina:

<code class="javascript">this.delta = this.delta.bind(this);</code>

Mengikat kaedah delta kepada contoh komponen memastikan ia mempunyai akses kepada konteks komponen ini, yang membolehkannya mengakses kaedah setState dan keadaan komponen.

Kod Kemas Kini

Versi kod yang diperbetulkan sepatutnya kelihatan seperti ini:

<code class="javascript">class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1,
        };

        this.delta = this.delta.bind(this); // Bind 'delta' to the component instance
    }

    delta() {
        this.setState({
            count: this.state.count++,
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}</code>

Dengan mengikat kaedah delta, anda berjaya menyelesaikan " Tidak dapat membaca ralat 'setState' of undefined" dan membolehkan komponen menambah kiraan seperti yang dijangkakan.

Atas ialah kandungan terperinci Mengapa React Melemparkan Ralat 'Tidak Dapat Membaca Harta 'setState' Undefined'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn