SQL Server Tips, Teknik, dan Artikel

Cara Memperbaiki Peringatan “useEffect tidak boleh mengembalikan apa pun selain fungsi”

carbon-23.png

[ad_1]

Melanjutkan seri kami tentang Reaksikhususnya React hooks, mari kita lihat useEffect kait. Ini adalah hook yang sangat kuat yang memungkinkan Anda untuk menangani efek samping dari perubahan status atau prop serta membuat fungsionalitas on-mount yang mirip dengan componentDidMount dalam komponen kelas.

gambar-44-8

Dengan demikian, kait ini sering digunakan untuk permintaan asinkron seperti memuat data untuk komponen segera setelah komponen tersebut dirender atau memuat data baru berdasarkan perubahan nilai lain. Meskipun banyak kegunaannya, membuat fungsi semacam ini bisa jadi rumit dan Anda mungkin akan mendapatkan peringatan seperti useEffect must not return anything besides a function, which is used for clean-up.

Masalah

Seperti yang disebutkan sebelumnya, ingin melakukan sesuatu secara tidak sinkron di dalam useEffect adalah kasus penggunaan umum untuk kait ini. Misalnya, bayangkan Anda memiliki komponen yang menampilkan daftar pengguna tetapi pengguna tersebut berasal dari database sehingga Anda harus memintanya saat memuat halaman. Dalam bentuknya yang paling sederhana, Anda mungkin memiliki komponen seperti ini:

const UsersComponent = () => { const [users, setUsers] = useState([]); const [usersLoading, setUsersLoading] = useState(false); useEffect(async () => { setUsersLoading(true); const result = await getUsers(); setUsers(result); setUsersLoading(false); }, []); return ( <div> <h1>Users</h1> <div> {users.map((user) => ( <div key={user.id}>{user.username}</div> ))} </div> </div> ); };

Code language: JavaScript (javascript)

Di sini Anda dapat melihat pengaturan dasar untuk komponen yang dijelaskan di atas. Saat halaman dimuat, komponen harus memuat pengguna dari API dan setelah selesai, komponen akan memperbarui statusnya. Terlihat bagus, tapi ini akan memicu useEffect must not return anything besides a function, which is used for clean-up peringatan yang disebutkan di atas. Itu karena panggilan balik itu sendiri mengembalikan janji yang tidak sesuai dengan useEffect.

Solusinya

Perbaikan di sini sebenarnya cukup sederhana. Anda harus membungkus pekerjaan asinkron Anda dalam suatu fungsi dan kemudian memanggilnya dari useEffect panggilan balik. Inilah solusi itu menggunakan contoh di atas:

const UsersComponent = () => { const [users, setUsers] = useState([]); const [usersLoading, setUsersLoading] = useState(false); useEffect(() => { const loadData = async () => { setUsersLoading(true); const result = await getUsers(); setUsers(result); setUsersLoading(false); }; loadData(); }, []); return ( <div> <h1>Users</h1> {usersLoading && <div>Loading...</div>} <div> {users.map((user) => ( <div key={user.id}>{user.username}</div> ))} </div> </div> ); };

Code language: JavaScript (javascript)

Ingatlah bahwa meskipun ini berhasil, Anda mungkin harus memperbaiki solusi Anda lebih lanjut untuk menangani kondisi balapan dan pembersihan panggilan asinkron Anda, tetapi itu di luar cakupan artikel ini.

Kesimpulan

Kait reaksi, panggilan asinkron, dan efek samping adalah topik yang rumit sehingga menggabungkannya bisa jadi sulit untuk dikatakan. Semoga solusi ini membantu kasus penggunaan Anda dan, seperti biasa, jangan ragu untuk meninggalkan umpan balik yang mungkin Anda miliki. Terima kasih sudah membaca!

[ad_2]

Source link

Artikel terbaru