3 kezdő reagálási hiba, amely tönkreteheti az alkalmazását

React fejlesztőként biztosan elkövet néhány hibát a keretrendszerrel való kódolás során. Néhány ilyen hiba meglehetősen gyakori. És finom természetük miatt nehéznek találhatja ezeket a problémákat az alkalmazás hibakeresése során.

Fedezze fel a fejlesztők által elkövetett három leggyakoribb React-hibát. Kezdő, középszintű vagy haladó React fejlesztőként elkövetheti ezeket a hibákat. De ezek és következményeik megismerése segít elkerülni és megoldani őket.

1. Rossz típusú visszahívási funkció használata

Az eseménykezelés bevett gyakorlat a Reactban, via A JavaScript hatékony eseményfigyelő funkciója. Lehet, hogy meg szeretné változtatni egy gomb színét, amikor rámutat. Lehet, hogy űrlapadatokat szeretne küldeni a szervernek a benyújtáskor. Mindkét esetben egy visszahívási funkciót kell átadnia az eseménynek a kívánt reakció végrehajtásához. Néhány React fejlesztő itt követ el hibákat.

Vegyük például a következő összetevőt:

exportalapértelmezettfunkcióApp() {
funkcióhandleSubmit(e) {
 e.preventDefault()
konzol.log("Űrlap beküldve!")
 }
funkciónyomtatás(szám) {
konzol.log("Nyomtatás", szám)
 }
funkcióduplázó(szám) {
Visszatérés() => {
konzol.log("Kettős", szám * 2)
 }
 }
Visszatérés (
 <>
 {/* A kód ide kerül */}
 </>
 )
}

Itt három külön funkciója van. Míg az első két függvény nem ad vissza semmit, a harmadik egy másik függvényt ad vissza. Ezt észben kell tartania, mert ez kulcsfontosságú lesz annak megértéséhez, hogy mit fog tanulni legközelebb.

Most a JSX-re lépve kezdjük azzal az első és leggyakoribb módszerrel, amellyel egy függvényt eseménykezelőként adunk át:

<formaonSubmit={handleSubmit}>
<bemenettípus="szöveg"név="szöveg"alapértelmezett érték="a kezdeti"/>
<gomb>Beküldésgomb>
forma>

Ez a példa a függvény nevét az onSubmit javaslaton keresztül adja át az eseménynek, így a React meghívja a handleSubmit parancsot az űrlap elküldésekor. A handleSubmit belsejében elérheti az eseményobjektumot, amely hozzáférést biztosít olyan tulajdonságokhoz, mint pl esemény.célérték és olyan módszereket, mint event.preventDefault().

Az eseménykezelő függvény átadásának második módja a visszahívási függvényen belüli meghívása. Lényegében továbbadjaKattintson egy függvényre, amely meghívja a print() függvényt:

{[1, 5, 7].térkép((szám) => {
Visszatérés (
 nyomtatás (szám)}>
 Nyomtatás: {number}
 </button>
 )
})}

Ez a módszer olyan esetekben hasznos, amikor helyi adatokat szeretne átadni a függvénynek. A fenti példa minden számot átad a print() függvénynek. Ha az első módszert használná, akkor nem tudna argumentumokat átadni a függvénynek.

A harmadik módszer az, amikor sok fejlesztő sok hibát követ el. Emlékezzünk vissza, hogy a duplázó függvény egy másik függvényt ad vissza:

funkcióduplázó(szám) {
Visszatérés() => {
konzol.log("Kettős", szám * 2)
 }
}

Most, ha a JSX-ben használta, így:

{[1, 5, 7].térkép((szám) => {
Visszatérés (
 duplázó (szám)}>
 Dupla {number}
 </button>
 )
})}

Ebben az esetben az a függvény, amelyből visszatér kettős() az onClickhez van rendelve. Ez lényegében ugyanaz, mint a visszaadott függvény másolása és beillesztése az onClickbe. Ez utóbbi módszernek nincs használati esete. Legtöbbször jobb, ha hozzáadja a függvényt változóként (első metódus), vagy visszahíváson belül hívja meg a függvényt (második módszer).

Mindhárom technika érvényes, mert minden esetben egy függvényt adunk át az eseménynek. A React alkalmazásban meg kell győződnie arról, hogy egy függvényt adott át egy eseménytulajdonságnak. Ez lehet egy változó, egy keményen kódolt függvény (inline), vagy egy objektum/függvény, amely egy másik függvényt ad vissza.

2. Nulla kiírása téves ellenőrzés során

Amikor te vagy egy elem feltételes megjelenítése a Reactben, használhatja az if...else utasítást vagy a zárlati technikát. A rövidzárlat kettős „és” jel (&&) használatával jár. Ha az „és” jel előtti feltétel igaz, akkor a böngésző az „és” jelet követő kódot futtatja. Ha nem, akkor a böngésző nem hajt végre kódot.

A rövidzárlat a jobb technika tömör szintaxisának köszönhetően, de van egy mellékhatása, amelyet sok fejlesztő nem vesz észre. Ez a hiba azért történik, mert nem értjük pontosan, hogyan működik a JSX hamis értékekkel.

Vegye figyelembe a következő kódot:

exportalapértelmezettfunkcióApp() {
const array = [1, 2, 3, 4]
Visszatérés (


 {array.length && (


Sor tételek:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Mindaddig, amíg a tömbben van valami, a React minden elemet kinyomtat az oldalon. Ennek oka a array.length a csekk valódi értéket ad vissza. De mi történik, ha a tömb üres? Először a következő elemek jelennek meg az oldalon, ami elvárható. Azonban egy furcsa nulla jelenik meg a képernyőn.

Ennek oka az array.length nullát ad vissza. A nulla érték hamis a JavaScriptben. A probléma pedig az, hogy a JSX nullát jelenít meg a képernyőn. Más hamis értékek, például null, false és undefined, nem jelennek meg. Ez rossz felhasználói élményhez vezethet, mert mindig nulla jelenik meg az oldalon. Néha a nulla olyan kicsi lehet, hogy észre sem veszed.

A megoldás az, hogy csak nullát, undefined vagy false értéket ad vissza. Ezt úgy teheti meg, hogy a feltételben a nullát kifejezetten ellenőrzi, ahelyett, hogy hamis értékre hagyatkozna:

exportalapértelmezettfunkcióApp() {
const array = [1, 2, 3, 4]
Visszatérés (


 {tömb.hosszúság !== 0 && (


Sor tételek:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Most a nulla érték akkor sem jelenik meg a képernyőn, ha a tömb üres.

3. Az állapot megfelelő frissítésének elmulasztása

Amikor egy React összetevő állapotát frissíti, azt megfelelően kell elvégeznie, hogy elkerülje a nem kívánt mellékhatásokat. A legrosszabb hibák azok, amelyek nem okoznak hibát. Megnehezítik a hibakeresést és annak kiderítését, hogy mi a probléma. A rossz állapotú frissítések általában ilyen hatással járnak.

Ez a hiba abból adódik, hogy nem érti, hogyan kell frissíteni az állapotot, amikor a meglévő állapotot használja. Vegyük például a következő kódot:

exportalapértelmezettfunkcióApp() {
const [array, setArray] = useState([1, 2, 3])
funkcióaddNumberToStart() {
 array.unshift (szám)
 setArray (tömb)
 }
funkcióaddNumberToEnd() {
 array.unshift (szám)
 setArray (tömb)
 }
Visszatérés (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
konzol.log (tömb)
 }}
 >
 Hozzáadás 0 a kezdéshez/végéhez
 </button>
 </>
 )
}

Ha a fenti kódot futtatná, észrevenné, hogy mindkét függvény nullát adott a tömb elejére és végére. De nem adta hozzá a nullákat az oldalra nyomtatott tömbhöz. Továbbra is kattinthat a gombra, de a felhasználói felület változatlan marad.

Ennek az az oka, hogy mindkét függvényben az állapotát mutálja array.push(). A React kifejezetten figyelmeztet, hogy az állapotnak változhatatlannak kell lennie a Reactben, vagyis egyáltalán nem változtathatja meg. A React referenciaértékeket használ az állapotával együtt.

A megoldás az, hogy hozzáfér az aktuális állapothoz (currentArray), másolatot készít arról, és frissíti a másolatot:

funkcióaddNumberToStart(szám) {
 setArray((currentArray) => {
Visszatérés [szám, ...currentArray]
 })
}
funkcióaddNumberToStart(szám) {
 setArray((currentArray) => {
Visszatérés [...currentArray, number]
 })
}

Ez a megfelelő módszer a React állapotának frissítésére. Most, amikor rákattint a gombra, nullát ad a tömb elejéhez és végéhez. De ami a legfontosabb, a frissítések azonnal megjelennek az oldalon.

Egyéb fontos JavaScript-fogalmak a Reacthoz

Ez a cikk bemutatott néhány gyakori hibát, amelyet el kell kerülni a React kódolása során. Mindhárom itt leírt hiba a JavaScript megfelelő megértésének elmulasztásából ered. Mivel a React egy JavaScript-keretrendszer, a Reacttel való együttműködéshez a JavaScript alapos ismerete szükséges. Ez azt jelenti, hogy megtanuljuk azokat a fontos fogalmakat, amelyek leginkább kapcsolódnak a React fejlesztéshez.