Pushen Sie Daten in React in das State Array

React ist die beliebteste Front-End-Bibliothek, weil sie Entwicklern die Freiheit gibt, dynamische, interaktive Anwendungen mit Code-Effizienz zu erstellen. Dieses Framework hat viele großartige Funktionen.

Dieser Artikel konzentriert sich auf das Objekt state, das für die Implementierung dynamischer Funktionen in React unerlässlich ist. Genauer gesagt zeigen wir, wie man den Zustand in React pflegt und aktualisiert.

Pushen Sie Daten in React in das State Array

Viele JavaScript-Entwickler verwenden die Methode .push(), um Elemente am Ende des Arrays hinzuzufügen. Dies funktioniert gut in einfachem JavaScript, aber wenn das Array eine Zustandsvariable ist (oder eine Eigenschaft eines state-Objekts), kann die Verwendung der .push()-Methode zu unerwarteten Ergebnissen führen.

Bei der Verwendung der .push()-Methode müssen wir den Unterschied zwischen Nebeneffekten und Rückgabewerten verstehen. Es gibt die Länge des aktualisierten Arrays zurück, nicht das aktualisierte Array, wobei am Ende neue Elemente hinzugefügt werden.

Das Verschieben von Elementen in das Array ist nur ein Nebeneffekt.

Nicht nur das, React hat eine strikte Regel gegen das direkte Mutieren des Objekts state. Daher können Sie Elemente nicht direkt in eine state-Eigenschaft verschieben, die einen Array-Wert enthält.

Um das state-Objekt in React zu aktualisieren, müssen Sie die setState()-Methode verwenden und den aktualisierten state als Argument angeben.

Sie können auch den useState()-Hook verwenden, der eine Funktion bereitstellt, um eine state-Variable direkt zu aktualisieren.

Schauen wir uns das Beispiel an:

import "./styles.css";
import { useState } from "react";
export default function App() {
  let [arr, setArr] = useState([1, 2, 3, 4]);
  // arr.push(5) wrong
  const numberToBeAdded = 5
  console.log(numberToBeAdded);

  return (
    <div className="App">
      <button onClick={() => setArr((arr) => [...arr, numberToBeAdded])}>Expand array</button>
    </div>
  );
}

Sehen Sie sich das Live-Beispiel an. Öffnen Sie die Konsole, um die Änderungen am Statuswert anzuzeigen.

Wir haben den Hook useState() verwendet, um die Zustandsvariable arr zu definieren, und die Funktion setArr, um diese Variable zu aktualisieren. Wir haben dem useState()-Hook ein Argument übergeben – den Anfangswert des Arrays.

React erlaubt es Ihnen nicht, die Methode .push() zu verwenden, um die Zustandsvariable arr direkt zu mutieren. Wenn wir dem Array einen Integer-Wert 5 hinzufügen möchten, ist arr.push() nicht der richtige Weg, dies zu tun.

Stattdessen ist der beste Weg, dem Array ein Element hinzuzufügen, eine Funktion zu haben, die ein Argument akzeptiert – die alte Zustandsvariable – und die neue Zustandsvariable zurückgibt.

Hier ist die Handler-Funktion:

() => setArr((arr) => [...arr, numberToBeAdded])

Wie Sie sehen können, ist das Argument der Funktion setArr() eine Callback-Funktion, die einen aktuellen Wert der Statusvariablen arr nimmt und den neuen zurückgibt.

Um die Zahl am Ende des Arrays hinzuzufügen, haben wir den Spread-Operator verwendet, der auch als drei Punkte bekannt ist. ...arr nimmt alle Werte aus dem aktuellen Array und fügt den Wert hinzu, der in der Variablen numberToBeAdded enthalten ist.

Sie können den gleichen Ansatz verwenden, um am Anfang einen Mehrwert zu schaffen:

() => setArr((arr) => [numberToBeAdded, ...arr])

Verschieben Sie einfach den Wert, der hinzugefügt werden soll, nach vorne.