3 pradedančiųjų reakcijos klaidos, kurios gali sugadinti jūsų programą

Kaip „React“ kūrėjas, koduodami sistemą, turite padaryti klaidų. Kai kurios iš šių klaidų yra gana dažnos. Ir dėl jų subtilaus pobūdžio jums gali būti sunku nustatyti šias problemas derinant programą.

Atraskite tris dažniausiai pasitaikančias „React“ klaidas, kurias daro kūrėjai. Šias klaidas galite padaryti kaip pradedantysis, vidutinio lygio ar pažengęs „React“ kūrėjas. Tačiau sužinoję apie juos ir jų pasekmes galėsite jų išvengti ir išspręsti.

1. Netinkamo tipo atgalinio ryšio funkcijos naudojimas

Įvykių tvarkymas yra įprasta „React“ praktika, per „JavaScript“ galinga įvykių klausymosi funkcija. Galbūt norite pakeisti mygtuko spalvą, kai ant jo užvedamas pelės žymeklis. Galbūt norite siųsti formos duomenis į serverį pateikdami. Abiem šiais scenarijais, norėdami atlikti pageidaujamą reakciją, įvykiui turėsite perduoti atgalinio skambinimo funkciją. Čia kai kurie „React“ kūrėjai daro klaidų.

Apsvarstykite, pavyzdžiui, šį komponentą:

eksportuotinumatytasfunkcijaProgramėlė() {
funkcijarankenaPateikti(e) {
 e.preventDefault()
konsolė.log("Forma pateikta!")
 }
funkcijaspausdinti(numerį) {
konsolė.log("spausdinti", numeris)
 }
funkcijadubliuotojas(numerį) {
grąžinti() => {
konsolė.log("Dvigubas", numeris* 2)
 }
 }
grąžinti (
 <>
 {/* Kodas bus čia */}
 </>
 )
}

Čia turite tris atskiras funkcijas. Pirmosios dvi funkcijos nieko negrąžina, o trečioji grąžina kitą funkciją. Turite tai turėti omenyje, nes tai bus labai svarbi norint suprasti, ko mokysite toliau.

Dabar, pereidami prie JSX, pradėkime nuo pirmojo ir labiausiai paplitusio būdo, kaip perduoti funkciją kaip įvykių tvarkyklę:

<formaonSubmit={handleSubmit}>
<įvestistipo="tekstas"vardas="tekstas"Numatytoji reikšmė="pradinis"/>
<mygtuką>Pateiktimygtuką>
forma>

Šiame pavyzdyje funkcijos pavadinimas perduodamas įvykiui per „onSubmit“ pasiūlymą, taigi, kai pateikiate formą, „React“ iškviečia „handsubmit“. HandelSubmit viduje galite pasiekti įvykio objektą, kuris suteikia prieigą prie tokių savybių kaip įvykis.tikslinė.vertė ir tokius metodus event.preventDefault().

Antrasis būdas perduoti įvykių tvarkyklės funkciją yra iškviesti ją atgalinio skambučio funkcijoje. Iš esmės, jūs perduodate spustelėkite funkciją, kuri iškviečia print() už jus:

{[1, 5, 7].map((numerį) => {
grąžinti (
 spausdinti (numeris)}>
 Spausdinti {number}
 </button>
 )
})}

Šis metodas naudingas tais atvejais, kai funkcijai norite perduoti vietinius duomenis. Aukščiau pateiktame pavyzdyje kiekvienas skaičius perduodamas funkcijai print(). Jei naudotumėte pirmąjį metodą, negalėtumėte perduoti argumentų į funkciją.

Trečiasis metodas yra tai, kad daugelis kūrėjų daro daug klaidų. Prisiminkite, kad dvigubinimo funkcija grąžina kitą funkciją:

funkcijadubliuotojas(numerį) {
grąžinti() => {
konsolė.log("Dvigubas", numeris* 2)
 }
}

Dabar, jei naudojote jį JSX, taip:

{[1, 5, 7].map((numerį) => {
grąžinti (
 dvigubas (skaičius)}>
 Dvivietis {number}
 </button>
 )
})}

Šiuo atveju funkcija, iš kurios grįžtate dvigubas () yra tai, kas priskiriama onClick. Iš esmės tai tas pats, kas nukopijuoti grąžintą funkciją ir įklijuoti ją į onClick. Šis paskutinis metodas neturi jokio naudojimo atvejo. Daugeliu atvejų geriau pridėti funkciją kaip kintamąjį (pirmasis metodas) arba iškviesti funkciją atgalinio skambinimo metu (antrasis metodas).

Visi trys metodai galioja, nes visais atvejais įvykiui perduodate funkciją. Naudodami „React“ turite įsitikinti, kad perdavėte funkciją įvykio nuosavybei. Tai gali būti kintamasis, užkoduota funkcija (įterpta) arba objektas / funkcija, grąžinanti kitą funkciją.

2. Nulio išvedimas klaidingo patikrinimo metu

Kai esi sąlygiškai atvaizduojant elementą React, galite naudoti if...else teiginį arba trumpojo jungimo techniką. Trumpasis jungimas apima dvigubo ampersando (&&) naudojimą. Jei sąlyga prieš ampersandą įvertinama kaip tiesa, tada naršyklė paleidžia kodą po ampersando. Jei ne, naršyklė nevykdo jokio kodo.

Dėl glaustos sintaksės trumpasis jungimas yra geresnė technika, tačiau ji turi šalutinį poveikį, kurio daugelis kūrėjų nepastebi. Ši klaida įvyksta dėl to, kad tiksliai nesuprantate, kaip JSX veikia su klaidingomis reikšmėmis.

Apsvarstykite šį kodą:

eksportuotinumatytasfunkcijaProgramėlė() {
konst masyvas = [1, 2, 3, 4]
grąžinti (


 {masyvas.length && (


Masyvas daiktai:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Kol masyve yra kažkas, „React“ spausdins kiekvieną puslapio elementą. Taip yra dėl to, masyvas.ilgis čekis grąžina teisingą vertę. Bet kas atsitiks, jei jūsų masyvas tuščias? Pirma, sekantys elementai bus rodomi puslapyje, o to ir tikitės. Tačiau ekrane pamatysite keistą nulį.

To priežastis yra ta masyvas.ilgis grąžina nulį. „JavaScript“ vertė nulis yra klaidinga. Ir problema ta, kad JSX ekrane atvaizduoja nulį. Kitos klaidingos reikšmės, pvz., null, false ir undefined, nepateikiamos. Tai gali sukelti blogą vartotojo patirtį, nes puslapyje visada bus rodomas nulis. Kartais nulis gali būti toks mažas, kad to net nepastebi.

Sprendimas yra įsitikinti, kad pateikiate tik nulį, neapibrėžtą arba klaidingą. Tai darote aiškiai pažymėdami nulį sąlygoje, o ne pasitikėdami klaidinga verte:

eksportuotinumatytasfunkcijaProgramėlė() {
konst masyvas = [1, 2, 3, 4]
grąžinti (


 {masyvas.ilgis !== 0 && (


Masyvas daiktai:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Dabar reikšmė nulis nebus rodoma ekrane net tada, kai masyvas tuščias.

3. Nepavyko tinkamai atnaujinti valstybės

Kai atnaujinate React komponento būseną, turite tai padaryti tinkamai, kad išvengtumėte nepageidaujamo šalutinio poveikio. Blogiausios klaidos yra tos, kurios nepadaro klaidų už jus. Dėl jų sunku derinti ir išsiaiškinti, kokia yra problema. Prastos būklės atnaujinimai paprastai turi tokį poveikį.

Ši klaida kyla dėl to, kad nesuprantate, kaip atnaujinti būseną, kai naudojate esamą būseną. Apsvarstykite, pavyzdžiui, šį kodą:

eksportuotinumatytasfunkcijaProgramėlė() {
konst [masyvas, setArray] = useState([1, 2, 3])
funkcijaAddNumberToStart() {
 array.unshift (skaičius)
 setArray (masyvas)
 }
funkcijaAddNumberTo End() {
 array.unshift (skaičius)
 setArray (masyvas)
 }
grąžinti (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberTo End(0)
konsolė.log (masyvas)
 }}
 >
 Papildyti 0 į pradžią/pabaigą
 </button>
 </>
 )
}

Jei paleistumėte aukščiau pateiktą kodą, pastebėtumėte, kad abi funkcijos pridėjo nulį prie masyvo pradžios ir pabaigos. Tačiau jis nepridėjo nulių prie masyvo, išspausdinto puslapyje. Galite ir toliau spustelėti mygtuką, bet vartotojo sąsaja išlieka ta pati.

Taip yra todėl, kad abiejose funkcijose jūs keičiate savo būseną array.push(). „React“ aiškiai perspėja, kad „React“ būsena turi būti nekintanti, o tai reiškia, kad jūs negalite jos visiškai pakeisti. React naudoja referencines vertes su savo būsena.

Sprendimas yra pasiekti dabartinę būseną (currentArray), padaryti tos būsenos kopiją ir atnaujinti tą kopiją:

funkcijaAddNumberToStart(numerį) {
 setArray((currentArray) => {
grąžinti [numeris, ...currentArray]
 })
}
funkcijaAddNumberToStart(numerį) {
 setArray((currentArray) => {
grąžinti [...currentArray, number]
 })
}

Tai yra tinkamas būdas atnaujinti būseną „React“. Dabar, kai spustelėsite mygtuką, jis prideda nulį prie masyvo pradžios ir pabaigos. Bet svarbiausia, kad atnaujinimai iškart atsispindės puslapyje.

Kitos svarbios „JavaScript“ sąvokos, skirtos „React“.

Šiame straipsnyje aptariamos kai kurios dažniausiai pasitaikančios klaidos, kurių reikia vengti koduojant React. Visos trys čia aprašytos klaidos kyla dėl nesugebėjimo tinkamai suprasti „JavaScript“. Kadangi „React“ yra „JavaScript“ sistema, jums reikės tvirto „JavaScript“ supratimo, kad galėtumėte dirbti su „React“. Tai reiškia, kad reikia išmokti svarbių sąvokų, kurios labiausiai susijusios su React plėtra.