3 Beginners reageren op fouten die uw app kunnen verpesten

Als React-ontwikkelaar maak je ongetwijfeld fouten bij het coderen met het framework. Sommige van deze fouten komen vrij vaak voor. En vanwege hun subtiele aard vindt u het misschien moeilijk om deze problemen te identificeren om uw toepassing te debuggen.

Ontdek drie van de meest voorkomende React-fouten die ontwikkelaars maken. U kunt deze fouten maken als beginner, gemiddeld niveau of gevorderde React-ontwikkelaar. Maar als u ze en hun implicaties leert kennen, kunt u ze vermijden en oplossen.

1. Het verkeerde type callback-functie gebruiken

Gebeurtenisafhandeling is een gangbare praktijk in React, via JavaScript's krachtige functie voor het luisteren naar gebeurtenissen. Misschien wilt u de kleur van een knop wijzigen wanneer u erover zweeft. Misschien wilt u formuliergegevens bij indiening naar de server sturen. In beide scenario's moet u een callback-functie doorgeven aan de gebeurtenis om de gewenste reactie uit te voeren. Dit is waar sommige React-ontwikkelaars fouten maken.

Denk bijvoorbeeld aan het volgende onderdeel:

exporterenstandaardfunctieapp() {
functiehandvatVerzenden(e) {
 e.preventDefault()
troosten.log("Formulier ingediend!")
 }
functieafdrukken(nummer) {
troosten.log("Afdrukken", nummer)
 }
functieverdubbelaar(nummer) {
opbrengst() => {
troosten.log("Dubbele", nummer * 2)
 }
 }
opbrengst (
 <>
 {/* Code komt hier */}
 </>
 )
}

Hier heb je drie afzonderlijke functies. Terwijl de eerste twee functies niets retourneren, retourneert de derde een andere functie. U moet dat in gedachten houden, want het is essentieel om te begrijpen wat u vervolgens gaat leren.

Laten we, nu we naar de JSX gaan, beginnen met de eerste en meest gebruikelijke manier om een ​​functie door te geven als gebeurtenishandler:

<formulieropIndienen={handleSubmit}>
<invoertype="tekst"naam="tekst"standaardwaarde="voorletter"/>
<knop>Indienenknop>
formulier>

Dit voorbeeld geeft de naam van de functie door aan de gebeurtenis via de onSubmit-prop, dus React roept handleSubmit aan wanneer u het formulier indient. Binnen handleSubmit hebt u toegang tot het gebeurtenisobject, dat u toegang geeft tot eigenschappen zoals gebeurtenis.doelwaarde en methoden zoals evenement.preventDefault().

De tweede manier om een ​​gebeurtenishandlerfunctie door te geven, is door deze aan te roepen binnen de callback-functie. In wezen geef je onClick een functie door die print() voor je aanroept:

{[1, 5, 7].kaart((nummer) => {
opbrengst (
 afdrukken (nummer)}>
 Afdrukken {nummer}
 </button>
 )
})}

Deze methode is handig in scenario's waarin u lokale gegevens aan de functie wilt doorgeven. In het bovenstaande voorbeeld wordt elk getal doorgegeven aan de functie print(). Als u de eerste methode zou gebruiken, zou u geen argumenten aan de functie kunnen doorgeven.

Bij de derde methode maken veel ontwikkelaars veel fouten. Bedenk dat de verdubbelaarfunctie een andere functie retourneert:

functieverdubbelaar(nummer) {
opbrengst() => {
troosten.log("Dubbele", nummer * 2)
 }
}

Als je het nu in de JSX hebt gebruikt, zoals:

{[1, 5, 7].kaart((nummer) => {
opbrengst (
 verdubbelaar (getal)}>
 Dubbel {nummer}
 </button>
 )
})}

In dit geval de functie waaruit u terugkeert dubbele() is wat wordt toegewezen aan onClick. Het is in wezen hetzelfde als het kopiëren van de geretourneerde functie en het inline plakken in onClick. Deze laatste methode heeft geen use case. Meestal kunt u de functie beter toevoegen als een variabele (eerste methode) of de functie binnen een callback aanroepen (tweede methode).

Alle drie de technieken zijn geldig omdat u in alle gevallen een functie doorgeeft aan de gebeurtenis. In React moet u ervoor zorgen dat u een functie doorgeeft aan een gebeurteniseigenschap. Het kan een variabele zijn, een hardgecodeerde functie (inline) of een object/functie die een andere functie retourneert.

2. Nul uitvoeren tijdens een valse controle

Als je voorwaardelijk een element renderen in React, kunt u een if...else-instructie of de kortsluittechniek gebruiken. Kortsluiting omvat het gebruik van de dubbele ampersand (&&). Als de voorwaarde vóór het ampersand waar is, voert de browser de code uit die volgt op het ampersand. Zo niet, dan voert de browser geen code uit.

Kortsluiting is de betere techniek dankzij de beknopte syntaxis, maar het heeft een neveneffect dat veel ontwikkelaars niet opmerken. Deze fout wordt veroorzaakt door niet precies te begrijpen hoe JSX werkt met onjuiste waarden.

Beschouw de volgende code:

exporterenstandaardfunctieapp() {
const matrix = [1, 2, 3, 4]
opbrengst (


 {array.lengte && (


matrix artikelen:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Zolang er iets in de array zit, zal React elk item op de pagina afdrukken. Dit komt door de array.lengte check retourneert een waarheidswaarde. Maar wat gebeurt er als uw array leeg is? Eerst worden de volgende elementen op de pagina weergegeven, wat u zou verwachten. U zou echter een rare nul op uw scherm zien verschijnen.

De reden daarvoor is dat array.lengte geeft nul terug. De waarde nul is onjuist in JavaScript. En het probleem is dat JSX nul weergeeft op het scherm. Andere valse waarden zoals null, false en undefined worden niet weergegeven. Dit kan leiden tot een slechte gebruikerservaring omdat er altijd nul op de pagina verschijnt. Soms is de nul zo klein dat je hem niet eens opmerkt.

De oplossing is ervoor te zorgen dat u alleen null, undefined of false retourneert. U doet dit door expliciet nul aan te vinken in de voorwaarde in plaats van te vertrouwen op een onjuiste waarde:

exporterenstandaardfunctieapp() {
const matrix = [1, 2, 3, 4]
opbrengst (


 {array.lengte!== 0 && (


matrix artikelen:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Nu zal de waarde nul niet op het scherm verschijnen, zelfs niet als de array leeg is.

3. Kan de status niet correct bijwerken

Wanneer u de status in een React-component bijwerkt, moet u dit correct doen om ongewenste bijwerkingen te voorkomen. De ergste fouten zijn degenen die geen fouten voor je opleveren. Ze maken het moeilijk om te debuggen en erachter te komen wat het probleem is. Slechte statusupdates hebben de neiging om dat effect te hebben.

Deze fout komt voort uit het niet begrijpen hoe de status moet worden bijgewerkt wanneer u de bestaande status gebruikt. Beschouw bijvoorbeeld de volgende code:

exporterenstandaardfunctieapp() {
const [array, setArray] = useState([1, 2, 3])
functieaddNumberToStart() {
 array.unshift (nummer)
 setArray (matrix)
 }
functieaddNumberToEnd() {
 array.unshift (nummer)
 setArray (matrix)
 }
opbrengst (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
troosten.log (matrix)
 }}
 >
 Toevoegen 0 naar Start/Einde
 </button>
 </>
 )
}

Als u de bovenstaande code zou uitvoeren, zou u merken dat beide functies nul hebben toegevoegd aan het begin en einde van de array. Maar het heeft de nullen niet toegevoegd aan de array die op de pagina is afgedrukt. U kunt op de knop blijven klikken, maar de gebruikersinterface blijft hetzelfde.

Dit komt omdat je in beide functies je staat muteert met array.push(). React waarschuwt expliciet dat de status onveranderlijk moet zijn in React, wat betekent dat je deze helemaal niet kunt veranderen. React gebruikt referentiewaarden met zijn status.

De oplossing is om toegang te krijgen tot de huidige status (currentArray), een kopie van die status te maken en uw updates voor die kopie uit te voeren:

functieaddNumberToStart(nummer) {
 setArray((huidigeArray) => {
opbrengst [getal, ...currentArray]
 })
}
functieaddNumberToStart(nummer) {
 setArray((huidigeArray) => {
opbrengst [...currentArray, getal]
 })
}

Dit is de juiste methode om de status in React bij te werken. Als u nu op de knop klikt, voegt het nul toe aan het begin en einde van de array. Maar het belangrijkste is dat de updates onmiddellijk op de pagina worden weergegeven.

Andere belangrijke JavaScript-concepten voor React

Dit artikel behandelt enkele veelvoorkomende fouten die u moet vermijden bij het coderen in React. Alle drie de fouten die hier worden behandeld, komen voort uit het niet goed begrijpen van JavaScript. Omdat React een JavaScript-framework is, heb je een gedegen kennis van JavaScript nodig om met React te werken. Dit betekent het leren van de belangrijke concepten die het meest verband houden met React-ontwikkeling.