Menyahpepijat Perkara Ini

Pemula beranggapan pembangun berpengalaman tidak melakukan kesilapan.

Hakikatnya adalah berbeza.

Pembangun berpengalaman cuma menemui dan membaiki kesilapan dengan lebih cepat.

Baru-baru ini, saya membina aplikasi pengurusan projek full-stack menggunakan React, Zustand, Express, Prisma, dan PostgreSQL. Saya menghadapi berpuluh-puluh pepijat kecil. Pepijat ini mengajar saya bagaimana aplikasi frontend moden berfungsi.

Berikut adalah pengajaran yang saya perolehi:

  • React useEffect dan Async Anda tidak boleh memasukkan fungsi async secara terus ke dalam useEffect. React menjangkakan fungsi pembersihan (cleanup function) atau tiada apa-apa. Fungsi async mengembalikan Promise, yang melanggar peraturan ini. Sebaliknya, gunakan fungsi di dalam effect tersebut.

  • Fungsi yang Dilupakan Saya pernah menulis fungsi async di dalam useEffect tetapi tidak pernah memanggilnya. Komponen tersebut berjaya dimuatkan (mounted), tetapi tiada apa yang berlaku. Kadangkala pepijat hanyalah disebabkan panggilan fungsi yang tertinggal.

  • Struktur Data Axios Axios mengembalikan satu objek. Data anda berada di dalam response.data. Jika anda cuba menyimpan keseluruhan respons ke dalam state anda, aplikasi anda akan gagal.

  • Duplikasi URL Instance Axios saya mempunyai URL asas. Saya menambah awalan API sekali lagi dalam permintaan (request) saya. Ini menghasilkan laluan berganda seperti /api/api/projects. Sentiasa semak abstraksi anda.

  • Ralat Navigasi Komponen Navigate hanya berfungsi semasa proses rendering. Jika anda ingin mengalihkan pengguna selepas klik, gunakan hook useNavigate sebagai ganti.

  • Kontrak Backend Backend saya menghantar properti bernama accessToken. Frontend saya mencari properti bernama token. Oleh kerana nama tersebut tidak sepadan, state auth saya kekal undefined. Frontend dan backend mestilah sentiasa menggunakan nama yang sama.

  • Isu Masa (Timing Issues) Aplikasi saya cuba mengambil notifikasi sebelum pengguna log masuk. Ini menyebabkan ralat 401. Penyelesaiannya bukanlah dengan tidak menyemak notifikasi, tetapi dengan menyemak pengesahan (authentication) sebelum membuat permintaan.

Pengajaran terbesar adalah tentang aliran kerja (workflow) saya. Berhenti meneka.

Gunakan proses ini sebagai ganti:

  • Semak konsol pelayar (browser console).
  • Semak tab Network.
  • Periksa respons API.
  • Sahkan kontrak backend.
  • Periksa state anda.
  • Ikuti aliran data dari pangkalan data ke UI.

Perisian bukan tentang menaip dengan pantas. Ia adalah tentang memahami bagaimana data bergerak. Tutorial menunjukkan jalan yang mudah. Projek mengajar anda jalan yang sebenar.

Bina sesuatu yang nyata. Pepijat akan mengajar anda lebih banyak daripada mana-mana tutorial.

Sumber: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5