Cara Memperbaiki React Hook Disebut dalam Kesalahan Fungsi

React hook sangat bagus. Dirilis dengan versi 16.8 pada tahun 2019, React hook memungkinkan komponen fungsi React untuk menggunakan status yang mirip dengan cara komponen kelas melakukannya. Meskipun sudah sekitar beberapa tahun, banyak dari kita masih mempelajarinya dan tentu saja bagian dari mempelajari fitur baru adalah memecahkan banyak hal. Pada artikel ini kita akan mengatasi React Hook "useState" is called in function which is neither a React function component or a custom React hook function kesalahan.

Masalah

Untungnya ini adalah salah satu kesalahan yang memberikan informasi yang cukup dalam pesan itu sendiri untuk membantu sampai ke akar masalah. Dari pesan tersebut, kita dapat mengetahui bahwa ada dua situasi yang dapat diterima untuk menggunakan hook React: dalam komponen fungsi React atau dalam fungsi hook React kustom. Mari kita lihat opsi pertama itu.

Itu dokumentasi resmi React mengatakan bahwa komponen fungsi React yang valid adalah yang “menerima argumen objek ‘props’ tunggal dengan data dan mengembalikan elemen React.” Berikut adalah beberapa contoh komponen fungsi React yang tidak valid yang akan memicu kesalahan ini.

const myComponent = () => {
  const [state, setState] = useState(null);

  return <div>myComponent</div>;
};
Code language: JavaScript (javascript)

Dalam contoh di atas, semuanya terlihat bagus kecuali satu hal. Dalam Bereaksi, komponen harus mulai dengan huruf kapital dalam definisi mereka.

class MyComponent extends React.Component {
  render() {
    const [state, setState] = useState(null);
    return <div>My Component</div>;
  }
}
Code language: JavaScript (javascript)

Meskipun Anda tidak akan mendapatkan kesalahan yang sama, ini adalah contoh dari komponen yang sama yang dibuat sebagai komponen kelas. Ini tidak akan berhasil karena Anda tidak dapat menggunakan useState dalam komponen yang bukan komponen fungsi.

Penggunaan valid lainnya dari useState akan berada dalam kait khusus. Berikut ini contoh kait khusus yang tidak valid:

const customHook = () => {
  const [state, setState] = useState(null);

  return state;
};
Code language: JavaScript (javascript)

Mirip dengan contoh di atas dengan kapitalisasi, kait ini tidak valid karena tidak dimulai dengan use dalam namanya.

Solusinya

Seperti yang dapat Anda bayangkan, ketiga contoh ini cukup mudah untuk dipecahkan begitu Anda tahu bahwa itu adalah masalahnya sejak awal. Jika Anda berniat untuk menggunakan useState dalam sebuah komponen, pastikan bahwa komponen dimulai dengan huruf kapital dan merupakan komponen fungsi (bukan komponen kelas).

const MyComponent = () => {
  const [state, setState] = useState(null);

  return <div>My Component</div>;
};
Code language: JavaScript (javascript)

Untuk kait khusus, pastikan kait Anda dimulai dengan use dalam namanya.

const useMyCustomHook = () => {
  const [state, setState] = useState(null);

  return state;
};
Code language: JavaScript (javascript)

Untungnya, React memiliki plugin bernama eslint-plugin-bereaksi-kait untuk ESLint yang dapat membantu menunjukkan masalah sintaks ini sebelum membuat Anda bingung. Jika Anda menggunakan Create React App, plugin ini kemungkinan sudah dikonfigurasi di belakang layar. Jika tidak, Anda dapat menginstalnya sebagai dependensi dev dan kemudian menjalankan ESLint pada proyek Anda secara teratur untuk menghindari kesalahan ini sama sekali.

Kesimpulan

Ini adalah salah satu artikel React pertama kami, jadi silakan tinggalkan umpan balik jika Anda memilikinya. Jika tidak, periksa kami perpustakaan artikel dan sampai jumpa di yang berikutnya. Terima kasih!