Cara Memperbaiki React Hook ‘useState’ tidak dapat dipanggil dalam kesalahan komponen kelas

Saat kami melanjutkan liputan kami tentang konten React, mari bergerak maju dengan mundur selangkah dan belajar tentang cara tradisional membuat komponen di React. Hingga versi 16.8 dari React, jika Anda ingin mempertahankan status dalam suatu komponen, Anda harus menggunakan komponen kelas. Pembaruan itu menambahkan kait yang memungkinkan penggunaan status dalam komponen fungsi melalui penggunaan useState fungsi.

Komponen fungsi React hanyalah fungsi yang mengembalikan elemen React. Komponen kelas adalah kelas ES6 khusus tetapi keduanya dapat diterima dan setara.

Sesuatu yang mungkin Anda temui dalam kode Anda adalah campuran komponen kelas dan fungsi daripada hanya memilih satu atau yang lain. Jika demikian, penting untuk mengetahui perbedaan dalam cara Anda menghubungkan keadaan dengan setiap pendekatan. Anda mungkin mengalami React hook 'useState' cannot be called in class component kesalahan jika Anda mencampuradukkan deklarasi negara bagian Anda.

Masalah

Anda telah menyiapkan komponen kelas Anda dan Anda telah menambahkan status ke dalamnya. Katakanlah Anda memiliki komponen yang didefinisikan seperti ini:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    const [count, setCount] = React.useState(0);
  }

  handleCountChange() {
    setCount(count + 1);
  }

  render() {
    return (
      <div>
        Current count: {count}
        <br />
        <button onClick={handleCountChange}>Increment</button>
      </div>
    );
  }
}
Code language: JavaScript (javascript)

Jika Anda mencoba menjalankan kode ini, Anda akan mengalami kesalahan yang disebutkan di atas. Alasannya adalah kamu bisa hanya menggunakan useState jika komponen tersebut merupakan komponen fungsi. Dalam hal ini, kami bekerja dengan komponen kelas jadi setState harus digunakan sebagai gantinya.

Solusinya

Seperti yang disebutkan, Anda perlu memfaktorkan ulang kode Anda untuk menggunakan pengakses status yang tepat tergantung pada jenis komponen yang Anda gunakan. Ini memberi Anda dua opsi:

1. Cukup tukar useState dengan setState
2. Refactor komponen Anda menjadi komponen fungsi jika Anda secara khusus ingin menggunakan useState

Kedua opsi tersebut layak tergantung pada kasus penggunaan Anda sehingga kami akan melihat masing-masing berdasarkan contoh di atas.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.handleCountChange = this.handleCountChange.bind(this);
  }

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

  render() {
    return (
      <div>
        Current count: {this.state.count}
        <br />
        <button onClick={this.handleCountChange}>Increment</button>
      </div>
    );
  }
}
Code language: JavaScript (javascript)

Berikut adalah komponen yang sama menggunakan sintaks komponen fungsi:

function MyComponent() {
  const [count, setCount] = React.useState(0);

  const handleCountChange = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      Current count: {count}
      <br />
      <button onClick={handleCountChange}>Increment</button>
    </div>
  );
}
Code language: JavaScript (javascript)

Kesimpulan

Saya pribadi lebih suka komponen fungsi dengan sintaks keadaan karena sering kali terasa kurang bertele-tele tetapi, seperti yang disebutkan sebelumnya, komponen kelas dan fungsi sama-sama valid di Bereaksi meskipun keadaan dalam komponen fungsi lebih baru. Beri tahu kami pendekatan mana yang Anda sukai di komentar di bawah. Terima kasih sudah membaca!