3 Reaktionsfehler von Anfängern, die Ihre App ruinieren können

Als React-Entwickler machen Sie beim Codieren mit dem Framework zwangsläufig einige Fehler. Einige dieser Fehler kommen recht häufig vor. Und aufgrund ihrer subtilen Natur kann es für Sie schwierig sein, diese Probleme zum Debuggen Ihrer Anwendung zu identifizieren.

Entdecken Sie drei der häufigsten React-Fehler, die Entwickler machen. Diese Fehler können Sie als Anfänger, Fortgeschrittener oder fortgeschrittener React-Entwickler machen. Aber wenn Sie etwas über sie und ihre Auswirkungen lernen, können Sie sie vermeiden und lösen.

1. Verwendung des falschen Rückruffunktionstyps

Die Ereignisbehandlung ist in React eine gängige Praxis Die leistungsstarke Ereignisüberwachungsfunktion von JavaScript. Vielleicht möchten Sie die Farbe einer Schaltfläche ändern, wenn Sie mit der Maus darüber fahren. Möglicherweise möchten Sie Formulardaten beim Absenden an den Server senden. In beiden Szenarios müssten Sie eine Rückruffunktion an das Ereignis übergeben, um die gewünschte Reaktion auszuführen. Hier machen einige React-Entwickler Fehler.

Betrachten Sie zum Beispiel die folgende Komponente:

ExportStandardFunktionApp() {
FunktionhandleSubmit(e) {
 e.preventDefault()
Konsole.Protokoll(„Formular eingereicht!“)
 }
Funktiondrucken(Nummer) {
Konsole.Protokoll("Drucken", Nummer)
 }
FunktionDoppler(Nummer) {
zurückkehren() => {
Konsole.Protokoll("Doppelt", Nummer * 2)
 }
 }
zurückkehren (
 <>
 {/* Code kommt hierhin */}
 </>
 )
}

Hier stehen Ihnen drei separate Funktionen zur Verfügung. Während die ersten beiden Funktionen nichts zurückgeben, gibt die dritte eine andere Funktion zurück. Das müssen Sie im Hinterkopf behalten, denn es ist der Schlüssel zum Verständnis dessen, was Sie als Nächstes lernen werden.

Kommen wir nun zum JSX und beginnen wir mit der ersten und gebräuchlichsten Art, eine Funktion als Event-Handler zu übergeben:

<formonSubmit={handleSubmit}>
<EingangTyp="Text"Name="Text"Standardwert="Initial"/>
<Taste>EinreichenTaste>
form>

In diesem Beispiel wird der Name der Funktion über die Requisite onSubmit an das Ereignis übergeben, sodass React handleSubmit aufruft, wenn Sie das Formular senden. In handleSubmit können Sie auf das Ereignisobjekt zugreifen, wodurch Sie auf Eigenschaften wie zugreifen können event.target.value und Methoden wie event.preventDefault().

Die zweite Möglichkeit, eine Event-Handler-Funktion zu übergeben, besteht darin, sie innerhalb der Callback-Funktion aufzurufen. Im Wesentlichen übergeben Sie onClick eine Funktion, die print() für Sie aufruft:

{[1, 5, 7].Karte((Nummer) => {
zurückkehren (
 print (Nummer)}>
 Drucken Sie {Nummer}
 </button>
 )
})}

Diese Methode ist in Szenarien nützlich, in denen Sie lokale Daten an die Funktion übergeben möchten. Das obige Beispiel übergibt jede Zahl an die Funktion print(). Wenn Sie die erste Methode verwenden würden, könnten Sie der Funktion keine Argumente übergeben.

Bei der dritten Methode machen viele Entwickler viele Fehler. Denken Sie daran, dass die Doubler-Funktion eine andere Funktion zurückgibt:

FunktionDoppler(Nummer) {
zurückkehren() => {
Konsole.Protokoll("Doppelt", Nummer * 2)
 }
}

Wenn Sie es nun im JSX wie folgt verwendet haben:

{[1, 5, 7].Karte((Nummer) => {
zurückkehren (
 Verdoppler (Zahl)}>
 Doppelte {Anzahl}
 </button>
 )
})}

In diesem Fall die Funktion, von der Sie zurückkehren doppelt() wird onClick zugewiesen. Es ist im Wesentlichen dasselbe, als würde man die zurückgegebene Funktion kopieren und inline in onClick einfügen. Für diese letzte Methode gibt es keinen Anwendungsfall. In den meisten Fällen ist es besser, die Funktion als Variable hinzuzufügen (erste Methode) oder die Funktion innerhalb eines Rückrufs aufzurufen (zweite Methode).

Alle drei Techniken sind gültig, da Sie in allen Fällen eine Funktion an das Ereignis übergeben. In React müssen Sie sicherstellen, dass Sie eine Funktion an eine Ereigniseigenschaft übergeben. Es kann sich um eine Variable, eine fest codierte Funktion (Inline) oder ein Objekt/eine Funktion handeln, die eine andere Funktion zurückgibt.

2. Ausgabe von Null während einer Falschprüfung

Wenn du bist Bedingtes Rendern eines Elements in Reactkönnen Sie eine if...else-Anweisung oder die Kurzschlusstechnik verwenden. Beim Kurzschließen wird das doppelte kaufmännische Und-Zeichen (&&) verwendet. Wenn die Bedingung vor dem kaufmännischen Und als wahr ausgewertet wird, führt der Browser den Code nach dem kaufmännischen Und aus. Wenn nicht, führt der Browser keinen Code aus.

Kurzschließen ist dank seiner prägnanten Syntax die bessere Technik, bringt aber einen Nebeneffekt mit sich, den viele Entwickler nicht bemerken. Dieser Fehler tritt auf, weil man nicht genau versteht, wie JSX mit falschen Werten umgeht.

Betrachten Sie den folgenden Code:

ExportStandardFunktionApp() {
const Array = [1, 2, 3, 4]
zurückkehren (


 {array.length && (


Array Artikel:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Solange das Array etwas enthält, druckt React jedes Element auf der Seite. Das liegt daran array.length check gibt einen wahren Wert zurück. Aber was passiert, wenn Ihr Array leer ist? Zunächst werden die folgenden Elemente auf der Seite angezeigt, wie Sie es erwarten würden. Auf Ihrem Bildschirm wird jedoch eine seltsame Null angezeigt.

Der Grund dafür ist array.length gibt Null zurück. Der Wert Null ist in JavaScript falsch. Und das Problem ist, dass JSX auf dem Bildschirm Null rendert. Andere falsche Werte wie null, false und undefiniert werden nicht gerendert. Dies kann zu einer schlechten Benutzererfahrung führen, da auf der Seite immer Null angezeigt wird. Manchmal ist die Null so klein, dass Sie sie nicht einmal bemerken.

Die Lösung besteht darin, sicherzustellen, dass nur null, undefiniert oder falsch zurückgegeben wird. Dies erreichen Sie, indem Sie in der Bedingung explizit Null markieren, anstatt sich auf einen falschen Wert zu verlassen:

ExportStandardFunktionApp() {
const Array = [1, 2, 3, 4]
zurückkehren (


 {array.length !== 0 && (


Array Artikel:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Jetzt wird der Wert Null nicht auf dem Bildschirm angezeigt, selbst wenn das Array leer ist.

3. Fehler beim ordnungsgemäßen Aktualisieren des Status

Wenn Sie den Status in einer React-Komponente aktualisieren, müssen Sie dies ordnungsgemäß tun, um unerwünschte Nebenwirkungen zu vermeiden. Die schlimmsten Fehler sind diejenigen, die für Sie keine Fehler verursachen. Sie erschweren das Debuggen und Finden des Problems. Schlechte Zustandsaktualisierungen haben tendenziell diesen Effekt.

Dieser Fehler ist darauf zurückzuführen, dass Sie nicht verstehen, wie Sie den Status aktualisieren, wenn Sie den vorhandenen Status verwenden. Betrachten Sie zum Beispiel den folgenden Code:

ExportStandardFunktionApp() {
const [array, setArray] = useState([1, 2, 3])
FunktionaddNumberToStart() {
 array.unshift (Zahl)
 setArray (Array)
 }
FunktionaddNumberToEnd() {
 array.unshift (Zahl)
 setArray (Array)
 }
zurückkehren (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
Konsole.log (Array)
 }}
 >
 Hinzufügen 0 zum Anfang/Ende
 </button>
 </>
 )
}

Wenn Sie den obigen Code ausführen würden, würden Sie feststellen, dass beide Funktionen am Anfang und Ende des Arrays Nullen hinzufügen. Die Nullen wurden jedoch nicht zum auf der Seite gedruckten Array hinzugefügt. Sie können weiterhin auf die Schaltfläche klicken, die Benutzeroberfläche bleibt jedoch dieselbe.

Dies liegt daran, dass Sie in beiden Funktionen Ihren Zustand verändern array.push(). React warnt ausdrücklich davor, dass der Status in React unveränderlich sein muss, was bedeutet, dass Sie ihn überhaupt nicht ändern können. React verwendet Referenzwerte für seinen Status.

Die Lösung besteht darin, auf den aktuellen Status (currentArray) zuzugreifen, eine Kopie dieses Status zu erstellen und Ihre Aktualisierungen an dieser Kopie vorzunehmen:

FunktionaddNumberToStart(Nummer) {
 setArray((currentArray) => {
zurückkehren [Anzahl, ...aktuellesArray]
 })
}
FunktionaddNumberToStart(Nummer) {
 setArray((currentArray) => {
zurückkehren [...aktuellesArray, Zahl]
 })
}

Dies ist die richtige Methode, um den Status in React zu aktualisieren. Wenn Sie nun auf die Schaltfläche klicken, werden am Anfang und Ende des Arrays Nullen hinzugefügt. Am wichtigsten ist jedoch, dass die Aktualisierungen sofort auf der Seite angezeigt werden.

Weitere wichtige JavaScript-Konzepte für React

In diesem Artikel wurden einige der häufigsten Fehler behandelt, die beim Codieren in React vermieden werden sollten. Alle drei hier behandelten Fehler sind darauf zurückzuführen, dass JavaScript nicht richtig verstanden wurde. Da React ein JavaScript-Framework ist, benötigen Sie solide JavaScript-Kenntnisse, um mit React arbeiten zu können. Das bedeutet, die wichtigen Konzepte zu erlernen, die am meisten mit der React-Entwicklung zu tun haben.