Die häufigsten Fehler bei der Reaktionsentwicklung und wie man sie vermeidet ⚛️

Ich entwickle nun seit einigen Jahren React-Anwendungen und habe unzählige Fehler gemacht, die die Entwicklung Ihrer Projekte verlangsamen.

React ist eine der beliebtesten Bibliotheken zum Erstellen dynamischer Benutzeroberflächen, aber ihre Flexibilität kann bei neuen Entwicklern auch zu bestimmten häufigen Fehlern führen.

Dieser Leitfaden behandelt die häufigsten Fehler, die Entwickler in React machen können, und bietet umsetzbare Tipps zum Schreiben von besserem und effizienterem Code.

Lass uns eintauchen!

1. Mutierender Zustand

Bevor wir fortfahren, schreiben wir zunächst unsere React-Komponente, die eine Liste von Elementen anzeigen und eines hinzufügen oder entfernen soll:

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

Das erste, was diese Methode tut, ist der Aufruf der Push-Array-Funktion mit dem Ziel, einem Array ein Element hinzuzufügen.
Die zweite Sache ist der Aufruf von setItems, um die Änderungen auf die Statusvariable anzuwenden.

Wenn Sie jedoch versuchen, diesen Code auszuführen, funktioniert er nicht ❌

Dieser Code verstößt gegen eine sehr wichtige React-Regel: Mutierung des Zustands.

React verlässt sich auf die Identität einer Zustandsvariablen, um zu erkennen, wann sich der Zustand geändert hat. Wenn wir ein Element in ein Array verschieben, ändern wir nicht die Identität dieses Arrays, und daher kann React nicht erkennen, dass sich der Wert geändert hat, und das Array neu rendern.

Hier erfahren Sie, wie Sie das Problem beheben können ✅:

function goodHandleAddItem(item) {
    if (item.length === 0)
        return;

    const newArray = [...items, item];

    setItems(newArray);
    setItemToAdd('');
}

Bei dieser Methode habe ich mit dem Spread-Operator ein neues Array erstellt, um das neue Array mit dem Inhalt von Elementen zu instanziieren. Der zweite Parameter wird verwendet, um den neuen Inhalt (hier Element) hinzuzufügen.

Der letzte Schritt besteht darin, die setItems-Methode aufzurufen, um den neuen Status der variablen Elemente zu validieren ✅

---

2. Schlüssel wird in Listen nicht generiert

Jeder React-Entwickler hat diesen Fehler wahrscheinlich mindestens einmal während seiner Entwicklungsreise gesehen.

Dies geschieht am häufigsten beim Mapping über Daten. Hier ist ein Beispiel für diesen Verstoß:

items.map((item) => (
    <div>
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

Wenn wir ein Array von Elementen rendern möchten, müssen wir React etwas mehr Kontext geben, damit es jedes Element identifizieren kann. Im besten Fall muss es eine eindeutige Kennung sein.

Hier ist eine schnelle Möglichkeit, dieses Problem zu beheben, aber das ist nicht optimal:

items.map((item, index) => (
    <div key="{index}">
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

Wenn Sie Erfahrung mit React sammeln und besser verstehen, wie es funktioniert, können Sie anhand Ihres Falles beurteilen, ob es in Ordnung ist oder nicht.

Um es perfekt zu machen, können Sie einen UUID-Generator wie crypto.randomUUID() verwenden und ihn wie folgt in Ihrer Artikelliste als Objekt speichern:

const newItemToAdd = {
    id: crypto.randomUUID(),
    value: item
};
const newArray = [...items, newItemToAdd];
  setItems(newItems);

und verwenden Sie es beim Rendern wie folgt:

items.map((item, index) => (
    <div key="{item.id}">
        {item.value}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

Jetzt ist alles perfekt ✅

---

3. Verwendung von Async in useEffect

Nehmen wir an, wir haben eine Funktion, die beim Mounten einige Daten von einer API abrufen muss. Wir verwenden den Hook „useEffect“ und möchten das Schlüsselwort „await“ verwenden.

Lassen Sie uns den ersten Versuch prüfen:

Wie Sie vielleicht wissen, muss das Schlüsselwort „await“ in einer Funktion enthalten sein, die mit dem Schlüsselwort „async“ gekennzeichnet ist:

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

Leider funktioniert das nicht und wir erhalten diese Fehlermeldung:

function goodHandleAddItem(item) {
    if (item.length === 0)
        return;

    const newArray = [...items, item];

    setItems(newArray);
    setItemToAdd('');
}

Hier ist die Lösung: Erstellen Sie eine separate asynchrone Funktion innerhalb des useEffect-Hooks ✅

items.map((item) => (
    <div>
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

Es ist wichtig zu verstehen, was das Schlüsselwort async bedeutet:
Es gibt nicht den Objekt-JSON zurück, sondern ein Versprechen, das den Objekt-JSON auflöst.

Dies ist tatsächlich ein Problem, da useEffect kein Promise zurückgeben soll. Es erwartet, dass wir entweder nichts zurückgeben (wie oben) oder eine Bereinigungsfunktion. Bereinigungsfunktionen sind wichtig und gehen über den Rahmen dieses Handbuchs hinaus. Hier erfahren Sie, wie Sie sie nutzen können:

items.map((item, index) => (
    <div key="{index}">
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

---

4. Zugriff auf den Status vor dem erneuten Rendern

Kehren wir zur Statusverwaltung zurück, um einen weiteren interessanten Fehler zu sehen, den neue Entwickler sehr oft machen. Dies wird uns helfen, den Reaktionszustand noch besser zu verstehen.

Nehmen wir unsere Methode goodHandleAddItem, um dies zu veranschaulichen:

const newItemToAdd = {
    id: crypto.randomUUID(),
    value: item
};
const newArray = [...items, newItemToAdd];
  setItems(newItems);

Beim Ausführen dieses Codes können wir feststellen, dass die Konsole nicht das erwartete Ergebnis protokolliert.

Hier liegt das Problem: Die Setterfunktion einer Zustandsvariablen ist asynchron.

Wenn wir die setItems-Methode aufrufen, planen wir tatsächlich eine Aktualisierung und weisen keine Variable zu.

Hier ist die Lösung: Wir wissen bereits, was der Inhalt der Variablen mit der newArray-Variablen sein soll. Das heißt, um die Daten zu verwenden, die angeblich den Inhalt der Items-Variablen darstellen sollen, müssen wir stattdessen die Variable newArray verwenden, auch nach den setItems ✅

---

5. Verwendung veralteter Statusdaten

Im letzten Teil geht es auch um die React-Zustandsverwaltung. Nach diesem Leitfaden werden Sie zum Profi! ?

Eine häufige Gefahr bei der Verwendung von React Hooks ist der Missbrauch veralteter Statusdaten. Dies kann auftreten, wenn wir in aufeinanderfolgenden Statusaktualisierungen direkt auf die Statusvariable verweisen. Wie wir im vorherigen Fehler gesehen haben, können Statusaktualisierungen asynchron erfolgen. Das bedeutet, dass die Statusvariable möglicherweise nicht den neuesten Wert widerspiegelt, wenn in aufeinanderfolgenden Aufrufen darauf verwiesen wird.

Verwenden wir zur Verdeutlichung ein brandneues Beispiel, den bekannten Zähler:

items.map((item, index) => (
    <div key="{item.id}">
        {item.value}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

Die obige Verwendung ist falsch. Tatsächlich wird count direkt im setCount-Aufruf referenziert. In Ereignishandlern und Lebenszyklusmethoden können Statusaktualisierungen stapelweise erfolgen und verwenden beide denselben Anfangswert als Anzahl, was zu einem falschen Endstatus führt.

Es gibt eine andere Form von setCount, die wir verwenden können, damit die Dinge funktionieren: die Updater-Funktion. Die Updater-Funktion verwendet den vorherigen Status als Argument und gibt den neuen Status zurück, sodass jede aufeinanderfolgende Aktualisierung den richtigen Wert hat und unerwünschtes Verhalten verhindert wird.

So verwenden Sie es:

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

Die Protokollierung des Inhalts der Zählung zeigt jetzt den korrekten Wert an ✅

---

Abschluss

Wenn Sie diese häufigen Fehler vermeiden, können Sie leistungsfähigere React-Anwendungen entwickeln und die Statusverwaltung beherrschen!

Ich hoffe, dieser Leitfaden hat Ihnen geholfen und wünsche Ihnen viel Spaß beim Programmieren!

Hinterlassen Sie ein „Gefällt mir“, wenn Ihnen dieser Leitfaden als neuer oder bestätigter React-Entwickler gefallen hat?

Bis bald!