Kurekebisha Makosa Haya

Wanaoanza wanadhani watengenezaji wenye uzoefu hawafanyi makosa.

Ukweli ni tofauti.

Watengenezaji wenye uzoefu wanapata na kurekebisha makosa kwa haraka zaidi.

Hivi karibuni nilijenga programu ya usimamizi wa miradi ya full-stack nikitumia React, Zustand, Express, Prisma, na PostgreSQL. Nilikutana na bugs nyingi ndogo ndogo. Bugs hizi zilinifundisha jinsi programu za kisasa za frontend zinavyofanya kazi.

Hapa kuna masomo niliyojifunza:

  • React useEffect na Async Huwezi kuweka async function moja kwa moja ndani ya useEffect. React inatarajia cleanup function au hakuna kitu. Async function inarudisha Promise, jambo ambalo linakiuka sheria hii. Badala yake, tumia function ndani ya effect hiyo.

  • Function Iliyosahaulika Wakati mmoja niliandika async function ndani ya useEffect lakini sikuwahi kuiita (call). Component ilimount, lakini hakuna kilichotokea. Wakati mwingine bugs ni ukosefu tu wa kuita function.

  • Muundo wa Data wa Axios Axios inarudisha object. Data yako inapatikana ndani ya response.data. Ukijaribu kuhifadhi response nzima kwenye state yako, programu yako itafeli.

  • Kurudiwa kwa URL Instance yangu ya Axios ilikuwa na base URL. Nikaongeza kiambishi cha API tena kwenye maombi (requests) yangu. Hii ilisababisha njia mbili kama /api/api/projects. Kila mara kagua abstractions zako.

  • Makosa ya Navigation Component ya Navigate inafanya kazi wakati wa rendering pekee. Ukitaka kumhamisha mtumiaji baada ya kubofya, tumia useNavigate hook badala yake.

  • Mikataba ya Backend Backend yangu ilituma property iliyoitwa accessToken. Frontend yangu ilitafuta property iliyoitwa token. Kwa sababu majina hayakulingana, hali yangu ya auth ilibaki ikiwa undefined. Frontend na backend lazima zitumie majina sawa kila wakati.

  • Masuala ya Muda Programu yangu ilijaribu kuchukua notifications kabla ya mtumiaji kuingia (log in). Hii ilisababisha kosa la 401. Suluhisho halikuwa kutocheki notifications, bali kuangalia uthibitisho (authentication) kabla ya kufanya ombi (request).

Somo kubwa zaidi lilikuwa kuhusu mtindo wangu wa kazi (workflow). Acha kukisia.

Tumia mchakato huu badala yake:

  • Kagua browser console.
  • Kagua Network tab.
  • Kagua API response.
  • Hakiki backend contract.
  • Kagua state yako.
  • Fuatilia data kutoka kwenye database hadi kwenye UI.

Programu si kuhusu kuchapa kwa haraka. Ni kuhusu kuelewa jinsi data inavyosogea. Tutorials yanakupa njia rahisi. Miradi inakufundisha njia halisi.

Jenga kitu halisi. Bugs zitakufundisha zaidi kuliko tutorial yoyote.

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