setState und prevState in React

Wir werden setState und prevState einführen und sie in React verwenden.

setState und prevState in React

setState() und prevState() sind useState-Hooks, die verwendet werden, um den Status in einer React-Klassenkomponente zu ändern.

setState() gibt an, dass diese Komponente und ihre untergeordneten Komponenten geändert wurden und mit dem aktualisierten Zustand erneut gerendert werden müssen. setState ist die primäre Methode, die verwendet wird, um die Benutzeroberfläche als Reaktion auf Ereignishandler und Serverantworten zu aktualisieren.

prevState() ist dasselbe wie setState, aber der einzige Unterschied zwischen ihnen besteht darin, dass wir this.setState() verwenden, wenn wir den Status einer Komponente basierend auf dem vorherigen Status dieser Komponente ändern möchten. was uns den prevState liefert.

Sehen wir uns ein Beispiel für eine Zähler-App an. Das kann Zahlen erhöhen, verringern, zurücksetzen.

Zunächst erstellen wir eine neue Datei Counter.js. In Counter.js werden wir React from react importieren; und erstellen Sie eine Funktion namens Counter().

In Counter() initialisieren wir unsere Konstanten initialNum, num und setNum

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);
}

Wir werden das HTML mit Schaltflächen und einer Zähleranzeige zurückgeben. Counter.js sieht also wie folgt aus.

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);

  };

  return (
    <div>
      <p>Counter: {num}</p>
      <button onClick={() => setNum(initialNum)}>Reset</button>
      <button onClick={() => setNum(num + 1)}>Increment</button>
      <button onClick={() => setNum(num - 1)}>Decrement</button>
    </div>
  );
}
export default Counter;

Nehmen wir Counter.js in App.js auf und fügen seine Komponente hinzu. App.js sieht wie folgt aus.

# react
import "./styles.css";
import Counter from "./Counter.js";

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

Lassen Sie uns nun unseren Zähler testen.

Ausgabe:

Lassen Sie uns eine weitere Schaltfläche hinzufügen, die den Zähler um fünf erhöht.

# react
 <button onClick={IncrementByFive}>Increment By 5</button>

Lassen Sie uns eine Funktion IncrementByFive erstellen.

# react
const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum(num + 1);
    }
  };

Diese Funktion wird fünfmal wiederholt, um sie um 5 zu erhöhen.

Testen wir jetzt unsere Zähler-App.

Ausgabe:

Wenn wir auf die Schaltfläche Increment by 5 klicken, wird der Zähler nur um 1 erhöht.

Das liegt daran, dass in setNum(num + 1); Es gibt mehrere setNum-Aufrufe, also gruppiert React alle diese Aufrufe und aktualisiert den Status nur beim letzten Aufruf von setNum, und weil beim letzten Aufruf setNum noch nicht aktualisiert wird und immer noch denselben Wert hat, so es erhöht es nur um 1.

Da kommt prevState ins Spiel und löst unsere Probleme wie ein Weltmeister. Lassen Sie uns nun unsere Counter-App mit prevState umschreiben.

Anstatt einen Wert der neuen Zustandsvariablen zu übergeben, übergeben wir grundsätzlich eine Funktion, die Zugriff auf den alten Zustandswert hat. Also ändern wir jetzt die Funktion IncrementByFive, indem wir setNum(num + 1); ändern. zu setNum(prevNum => prevNum + 1);.

Unsere Funktion sieht also wie folgt aus.

# react
const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum(prevNum => prevNum + 1);
    }
  };

Testen wir jetzt unsere Zähler-App.

Ausgabe:

Wenn wir im obigen Ergebnis auf Increment by 5 klicken, wird es um 5 erhöht.

Korrigieren wir auch unsere anderen Buttons mit prevState.

Counter.js wird wie unten aussehen.

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);

  const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum((prevNum) => prevNum + 1);
    }
  };

  return (
    <div>
      <p>Counter: {num}</p>
      <button onClick={() => setNum(initialNum)}>Reset</button>
      <button onClick={() => setNum((prevNum) => prevNum + 1)}>
        Increment
      </button>
      <button onClick={() => setNum((prevNum) => prevNum - 1)}>
        Decrement
      </button>
      <button onClick={IncrementByFive}>Increment By 5</button>
    </div>
  );
}
export default Counter;

In diesem Leitfaden haben wir also die Probleme kennengelernt, die mit prevState gelöst werden können, und wir haben auch eine einfache Counter-App in React mit setState und prevState erstellt.