3 Začátečník Reagujte Chyby, které mohou zničit vaši aplikaci

Jako vývojář Reactu musíte při kódování s frameworkem udělat nějaké chyby. Některé z těchto chyb jsou docela běžné. A vzhledem k jejich jemné povaze může být pro vás obtížné identifikovat tyto problémy při ladění vaší aplikace.

Objevte tři nejčastější chyby React, kterých se vývojáři dopouštějí. Tyto chyby můžete udělat jako začátečník, středně pokročilý nebo pokročilý vývojář Reactu. Ale když se o nich a jejich důsledcích dozvíte, pomůže vám se jim vyhnout a vyřešit je.

1. Použití nesprávného typu funkce zpětného volání

Zpracování událostí je běžnou praxí v React, via Výkonná funkce JavaScriptu pro naslouchání událostem. Možná budete chtít změnit barvu tlačítka, když na něj umístíte kurzor. Možná budete chtít odeslat data formuláře na server při odeslání. V obou těchto scénářích byste museli události předat funkci zpětného volání, abyste provedli požadovanou reakci. Tady někteří vývojáři Reactu dělají chyby.

Zvažte například následující komponentu:

vývoznívýchozífunkceAplikace() {
funkcehandleSubmit(E) {
 e.preventDefault()
řídicí panel.log("Formulář odeslán!")
 }
funkcetisk(číslo) {
řídicí panel.log("Tisk", číslo)
 }
funkcezdvojovač(číslo) {
vrátit se() => {
řídicí panel.log("Dvojnásobek", číslo * 2)
 }
 }
vrátit se (
 <>
 {/* Kód půjde sem */}
 </>
 )
}

Zde máte tři samostatné funkce. Zatímco první dvě funkce nevrací nic, třetí vrací jinou funkci. Musíte to mít na paměti, protože to bude klíčové pro pochopení toho, co se budete učit dál.

Nyní, když přejdeme k JSX, začněme prvním a nejběžnějším způsobem, jak předat funkci jako obsluhu události:

<formulářna Odeslat={handleSubmit}>
<vstuptyp="text"název="text"výchozí hodnota="počáteční"/>
<knoflík>Předložitknoflík>
formulář>

Tento příklad předá název funkce události prostřednictvím prop onSubmit, takže React zavolá handleSubmit, když odešlete formulář. Uvnitř handleSubmit máte přístup k objektu události, který vám poskytuje přístup k vlastnostem, jako je událost.cílová.hodnota a metody jako event.preventDefault().

Druhým způsobem, jak předat funkci obsluhy události, je zavolat ji uvnitř funkce zpětného volání. V podstatě předáváte onClick funkci, která za vás volá print():

{[1, 5, 7].mapa((číslo) => {
vrátit se (
 tisknout (číslo)}>
 Vytisknout {číslo}
 </button>
 )
})}

Tato metoda je užitečná ve scénářích, kdy chcete funkci předat místní data. Výše uvedený příklad předá každé číslo funkci print(). Pokud byste použili první metodu, nemohli byste do funkce předávat argumenty.

Třetí metoda je tam, kde mnoho vývojářů dělá spoustu chyb. Připomeňme, že funkce zdvojovače vrací jinou funkci:

funkcezdvojovač(číslo) {
vrátit se() => {
řídicí panel.log("Dvojnásobek", číslo * 2)
 }
}

Nyní, pokud jste jej použili v JSX takto:

{[1, 5, 7].mapa((číslo) => {
vrátit se (
 zdvojovač (číslo)}>
 Dvojité {číslo}
 </button>
 )
})}

V tomto případě funkce, ze které se vracíte dvojnásobek() je to, co je přiřazeno k onClick. Je to v podstatě stejné jako zkopírování vrácené funkce a její vložení do řádku onClick. Tato poslední metoda nemá žádný případ použití. Ve většině případů je lepší přidat funkci jako proměnnou (první metoda) nebo zavolat funkci v rámci zpětného volání (druhá metoda).

Všechny tři techniky jsou platné, protože ve všech případech předáváte události funkci. V Reactu se musíte ujistit, že předáte funkci vlastnosti události. Může to být proměnná, pevně zakódovaná funkce (inline) nebo objekt/funkce, která vrací jinou funkci.

2. Výstup nuly během falešné kontroly

Když jsi podmíněné vykreslení prvku v Reactu, můžete použít příkaz if...else nebo techniku ​​zkratování. Zkratování zahrnuje použití dvojitého ampersandu (&&). Pokud se podmínka před ampersandem vyhodnotí jako true, prohlížeč spustí kód následující za ampersandem. Pokud ne, prohlížeč neprovede žádný kód.

Zkratování je lepší technika díky své stručné syntaxi, ale přichází s vedlejším efektem, kterého si mnoho vývojářů nevšimne. K této chybě dochází kvůli tomu, že přesně nerozumíte tomu, jak JSX pracuje s falešnými hodnotami.

Zvažte následující kód:

vývoznívýchozífunkceAplikace() {
konst pole = [1, 2, 3, 4]
vrátit se (


 {array.length && (


Pole položky: </span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Dokud pole má něco uvnitř, React vytiskne každou položku na stránce. To je kvůli pole.délka kontrola vrací pravdivou hodnotu. Ale co se stane, když je vaše pole prázdné? Nejprve se na stránce zobrazí následující prvky, což byste očekávali. Na obrazovce byste však našli podivnou nulu.

Důvodem je to pole.délka vrátí nulu. Hodnota nula je v JavaScriptu chybná. A problém je v tom, že JSX vykresluje na obrazovce nulu. Jiné falešné hodnoty jako null, false a undefined se nevykreslí. To může vést ke špatnému uživatelskému dojmu, protože na stránce se vždy zobrazí nula. Někdy může být nula tak malá, že si jí ani nevšimnete.

Řešením je ujistit se, že vracíte pouze hodnotu null, undefined nebo false. Uděláte to tak, že v podmínce výslovně zaškrtnete nulu, místo abyste se spoléhali na falešnou hodnotu:

vývoznívýchozífunkceAplikace() {
konst pole = [1, 2, 3, 4]
vrátit se (


 {array.length !== 0 && (


Pole položky: </span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Nyní se hodnota nula nezobrazí na obrazovce, i když je pole prázdné.

3. Chyba při správné aktualizaci stavu

Když aktualizujete stav v komponentě React, musíte to udělat správně, abyste se vyhnuli nežádoucím vedlejším účinkům. Nejhorší chyby jsou ty, které vám žádnou chybu nevyhodí. Znesnadňují ladění a zjištění, v čem je problém. Špatné aktualizace stavu mívají tento účinek.

Tato chyba pramení z toho, že nerozumíte tomu, jak aktualizovat stav, když používáte stávající stav. Zvažte například následující kód:

vývoznívýchozífunkceAplikace() {
konst [pole, setArray] = useState([1, 2, 3])
funkceaddNumberToStart() {
 array.unshift (číslo)
 setArray (pole)
 }
funkceaddNumberToEnd() {
 array.unshift (číslo)
 setArray (pole)
 }
vrátit se (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
řídicí panel.log (pole)
 }}
 >
 Přidat 0 na začátek/konec
 </button>
 </>
 )
}

Pokud byste spustili výše uvedený kód, všimli byste si, že obě funkce přidaly nulu na začátek a konec pole. Ale nepřidal nuly do pole vytištěného na stránce. Můžete klikat na tlačítko, ale uživatelské rozhraní zůstává stejné.

Je to proto, že v obou funkcích mutujete svůj stav array.push(). React výslovně varuje, že stav musí být v Reactu neměnný, což znamená, že jej nemůžete vůbec změnit. React používá referenční hodnoty se svým stavem.

Řešením je získat přístup k aktuálnímu stavu (currentArray), vytvořit kopii tohoto stavu a provést aktualizace této kopie:

funkceaddNumberToStart(číslo) {
 setArray((currentArray) => {
vrátit se [číslo, ...currentArray]
 })
}
funkceaddNumberToStart(číslo) {
 setArray((currentArray) => {
vrátit se [...currentArray, number]
 })
}

Toto je správná metoda aktualizace stavu v Reactu. Nyní, když kliknete na tlačítko, přidá nulu na začátek a konec pole. Ale co je nejdůležitější, aktualizace se na stránce projeví okamžitě.

Další důležité koncepty JavaScriptu pro React

Tento článek popisuje některé běžné chyby, kterým je třeba se vyhnout při kódování v Reactu. Všechny tři zde popsané chyby pramení z neschopnosti správně porozumět JavaScriptu. Vzhledem k tomu, že React je framework JavaScript, budete potřebovat dobré znalosti JavaScriptu, abyste mohli pracovat s Reactem. To znamená naučit se důležité koncepty, které se nejvíce týkají vývoje Reactu.