3 Iesācēju reakcijas kļūdas, kas var sabojāt jūsu lietotni

Kā React izstrādātājs, kodējot ietvaru, jūs noteikti pieļaujat dažas kļūdas. Dažas no šīm kļūdām ir diezgan izplatītas. Un to smalkā rakstura dēļ jums var būt grūti noteikt šīs problēmas, lai atkļūdotu lietojumprogrammu.

Atklājiet trīs izplatītākās React kļūdas, ko pieļauj izstrādātāji. Šīs kļūdas varat pieļaut kā iesācējs, vidēja līmeņa vai pieredzējis React izstrādātājs. Bet, uzzinot par tiem un to sekām, jūs varēsit tos novērst un atrisināt.

1. Nepareiza veida atzvanīšanas funkcijas izmantošana

Pasākumu apstrāde ir izplatīta prakse React, izmantojot JavaScript jaudīgā notikumu klausīšanās funkcionalitāte. Iespējams, vēlaties mainīt pogas krāsu, kad tiek novietots kursors. Varbūt vēlaties nosūtīt veidlapas datus uz serveri iesniegšanas brīdī. Abos šajos scenārijos jums ir jānodod notikumam atzvanīšanas funkcija, lai veiktu vēlamo reakciju. Šeit daži React izstrādātāji pieļauj kļūdas.

Apsveriet, piemēram, šādu komponentu:

eksportētnoklusējumafunkcijuApp() {
funkcijurokturisIesniegt(e) {
 e.preventDefault()
konsole.log("Veidlapa iesniegta!")
 }
funkcijudrukāt(numuru) {
konsole.log("Drukāt", numurs)
 }
funkcijudubultnieks(numuru) {
atgriezties() => {
konsole.log("Dubults", numurs* 2)
 }
 }
atgriezties (
 <>
 {/* Kods tiks parādīts šeit */}
 </>
 )
}

Šeit jums ir trīs atsevišķas funkcijas. Kamēr pirmās divas funkcijas neatgriež neko, trešā atgriež citu funkciju. Jums tas jāpatur prātā, jo tas būs galvenais, lai saprastu, ko jūs mācīsit tālāk.

Tagad, pārejot uz JSX, sāksim ar pirmo un visizplatītāko veidu, kā nodot funkciju kā notikumu apstrādātāju:

<formāonSubmit={handleSubmit}>
<ievadeveids="teksts"nosaukums="teksts"noklusējumaVērtība="sākotnējais"/>
<pogu>Iesniegtpogu>
formā>

Šajā piemērā funkcijas nosaukums tiek nodots notikumam, izmantojot rekvizītu onSubmit, tāpēc, iesniedzot veidlapu, React izsauc HandSubmit. Iekšpusē handleSubmit varat piekļūt notikuma objektam, kas nodrošina piekļuvi tādiem rekvizītiem kā notikums.mērķa vērtība un tādas metodes kā event.preventDefault().

Otrs veids, kā nodot notikumu apstrādātāja funkciju, ir to izsaukt atzvanīšanas funkcijā. Būtībā jūs nododat tālākNoklikšķiniet uz funkcijas, kas izsauc print() jūsu vietā:

{[1, 5, 7].map((numuru) => {
atgriezties (
 drukāt (numurs)}>
 Drukāt {number}
 </button>
 )
})}

Šī metode ir noderīga gadījumos, kad funkcijai vēlaties nodot vietējos datus. Iepriekš minētajā piemērā katrs skaitlis tiek nodots funkcijai print (). Ja izmantojāt pirmo metodi, jūs nevarētu nodot argumentus funkcijai.

Trešā metode ir tāda, ka daudzi izstrādātāji pieļauj daudz kļūdu. Atcerieties, ka dubultotāja funkcija atgriež citu funkciju:

funkcijudubultnieks(numuru) {
atgriezties() => {
konsole.log("Dubults", numurs* 2)
 }
}

Tagad, ja jūs to izmantojāt JSX, piemēram:

{[1, 5, 7].map((numuru) => {
atgriezties (
 dubultnieks (skaitlis)}>
 Double {number}
 </button>
 )
})}

Šajā gadījumā funkcija, no kuras atgriezāties dubultā () ir tas, kas tiek piešķirts onClick. Tas būtībā ir tas pats, kas atgrieztās funkcijas kopēšana un ielīmēšana programmā onClick. Šai pēdējai metodei nav lietošanas gadījuma. Vairumā gadījumu ir labāk pievienot funkciju kā mainīgo (pirmā metode) vai izsaukt funkciju atzvanīšanas ietvaros (otrā metode).

Visas trīs metodes ir derīgas, jo visos gadījumos jūs nododat funkciju notikumam. Programmā React jums ir jāpārliecinās, ka funkcija tiek nodota notikuma īpašumam. Tas var būt mainīgais, cietā kodēta funkcija (iekļauta) vai objekts/funkcija, kas atgriež citu funkciju.

2. Nepatiesas pārbaudes laikā tiek izvadīta nulle

Kad tu esi elementa nosacīti renderēšana programmā React, varat izmantot if...else paziņojumu vai īssavienojuma paņēmienu. Īssavienojums ir saistīts ar dubultās zīmes (&&) izmantošanu. Ja nosacījums pirms simbola & tiek novērtēts kā patiess, pārlūkprogramma palaiž kodu, kas seko simbolam &. Ja nē, pārlūkprogramma neizpilda nevienu kodu.

Īssavienojums ir labāks paņēmiens, pateicoties tā kodolīgajai sintaksei, taču tam ir blakusefekts, ko daudzi izstrādātāji nepamana. Šī kļūda rodas tāpēc, ka nesaprotat, kā tieši JSX darbojas ar viltotām vērtībām.

Apsveriet šādu kodu:

eksportētnoklusējumafunkcijuApp() {
konst masīvs = [1, 2, 3, 4]
atgriezties (


 {array.length && (


Masīvs preces:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Kamēr masīvā ir kaut kas iekšā, React izdrukās katru lapas vienumu. Tas ir tāpēc, masīvs.garums čeks atgriež patiesu vērtību. Bet kas notiek, ja jūsu masīvs ir tukšs? Pirmkārt, lapā tiks parādīti nākamie elementi, un tas ir tas, ko jūs sagaidāt. Tomēr ekrānā parādās dīvaina nulle.

Iemesls tam ir tas masīvs.garums atgriež nulli. Nulles vērtība JavaScript valodā ir nepatiesa. Un problēma ir tā, ka JSX ekrānā atveido nulli. Citas nepatiesas vērtības, piemēram, null, false un undefined, netiek renderētas. Tas var radīt sliktu lietotāja pieredzi, jo lapā vienmēr būs redzama nulle. Dažreiz nulle var būt tik maza, ka jūs to pat nepamanāt.

Risinājums ir nodrošināt, lai atgrieztos tikai nulle, undefined vai false. Jūs to darāt, nosacījumā skaidri atzīmējot nulli, nevis paļaujoties uz nepatiesu vērtību:

eksportētnoklusējumafunkcijuApp() {
konst masīvs = [1, 2, 3, 4]
atgriezties (


 {masīvs.garums !== 0 && (


Masīvs preces:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Tagad nulles vērtība netiks rādīta ekrānā pat tad, ja masīvs ir tukšs.

3. Nespēja pareizi atjaunināt stāvokli

Atjauninot React komponenta stāvokli, tas jādara pareizi, lai izvairītos no nevēlamām blakusparādībām. Sliktākās kļūdas ir tās, kas jums nedod nekādas kļūdas. Tie apgrūtina atkļūdošanu un problēmas noskaidrošanu. Slikta stāvokļa atjauninājumiem parasti ir šāda ietekme.

Šī kļūda rodas no tā, ka jūs nesaprotat, kā atjaunināt stāvokli, kad izmantojat esošo stāvokli. Apsveriet, piemēram, šādu kodu:

eksportētnoklusējumafunkcijuApp() {
konst [masīvs, setArray] = useState([1, 2, 3])
funkcijuaddNumberToStart() {
 array.unshift (skaitlis)
 setArray (masīvs)
 }
funkcijuaddNumberTo End() {
 array.unshift (skaitlis)
 setArray (masīvs)
 }
atgriezties (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberTo End(0)
konsole.log (masīvs)
 }}
 >
 Pievienot 0 uz sākumu/beigumu
 </button>
 </>
 )
}

Ja palaist iepriekš minēto kodu, jūs pamanīsit, ka abas funkcijas pievienoja nulli masīva sākumam un beigām. Bet tas nav pievienojis nulles lapā izdrukātajam masīvam. Varat turpināt noklikšķināt uz pogas, taču lietotāja interfeiss paliek nemainīgs.

Tas ir tāpēc, ka abās funkcijās jūs maināt savu stāvokli ar array.push(). React skaidri brīdina, ka React statusam ir jābūt nemainīgam, kas nozīmē, ka jūs to nevarat mainīt vispār. React izmanto atsauces vērtības ar savu stāvokli.

Risinājums ir piekļūt pašreizējam stāvoklim (currentArray), izveidot šī stāvokļa kopiju un veikt šīs kopijas atjauninājumus:

funkcijuaddNumberToStart(numuru) {
 setArray((currentArray) => {
atgriezties [numurs, ...currentArray]
 })
}
funkcijuaddNumberToStart(numuru) {
 setArray((currentArray) => {
atgriezties [...currentArray, number]
 })
}

Šī ir pareizā metode, lai atjauninātu React stāvokli. Tagad, noklikšķinot uz pogas, tas pievieno nulli masīva sākumam un beigām. Bet pats galvenais, atjauninājumi nekavējoties tiks atspoguļoti lapā.

Citas svarīgas JavaScript koncepcijas React

Šajā rakstā tika apskatītas dažas izplatītākās kļūdas, no kurām jāizvairās, kodējot React. Visas trīs šeit aprakstītās kļūdas izriet no nespējas pareizi saprast JavaScript. Tā kā React ir JavaScript ietvars, jums ir nepieciešama laba izpratne par JavaScript, lai strādātu ar React. Tas nozīmē, ka jāapgūst svarīgākie jēdzieni, kas visvairāk attiecas uz React attīstību.