React 中的 setState 和 prevState

Rana Hasnain Khan 2024年2月15日

React React setState React prevState

我們將介紹 setState 和 prevState 並在 React 中使用它們。

React 中的 `setState` 和 `prevState`

setState() 和 prevState() 是 useState 鉤子，用於更改 React 類元件中的狀態。

setState() 表示該元件及其子元件發生了變化，需要使用更新後的狀態重新渲染。setState 是用於更新 UI 以響應事件處理程式和伺服器響應的主要方法。

prevState() 與 setState 相同，但它們之間的唯一區別是，如果我們想根據該元件的先前狀態更改該元件的狀態，我們使用 this.setState()，它為我們提供了 prevState。

讓我們檢查一個計數器應用程式的示例。這可以增加、減少、重置數字。

首先，我們將建立一個新檔案 Counter.js。在 Counter.js 我們將 import React from "react"; 並建立一個名為 Counter() 的函式。

在 Counter() 中，我們將初始化我們的常量 initialNum、num 和 setNum

# react
import React from "react";

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

我們將返回帶有按鈕和計數器顯示的 HTML。因此，Counter.js 將如下所示。

# 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;

讓我們在 App.js 中包含 Counter.js 並新增它的元件。App.js 將如下所示。

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

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

現在，讓我們測試一下我們的計數器。

輸出：

使用 setState 的計數器應用程式

讓我們新增另一個按鈕，將計數器增加 5。

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

讓我們建立一個函式 IncrementByFive。

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

此函式將迴圈五次以將其遞增 5。

現在，讓我們測試我們的計數器應用程式。

輸出：

使用 setState 的具有 incrementbyfive 函式的計數器應用程式

當我們點選 Increment by 5 按鈕時，它只會將計數器增加 1。

這是因為在 setNum(num + 1); 有多個 setNum 呼叫，因此 React 將所有這些呼叫分組並僅在最後一次呼叫 setNum 時更新狀態，並且因為在最後一次呼叫中 setNum 尚未更新並且仍然具有相同的值，所以它僅將其增加 1。

這就是 prevState 派上用場並像冠軍一樣解決我們的問題的時候。現在，讓我們使用 prevState 重寫我們的計數器應用程式。

基本上，我們不是傳入新狀態變數的值，而是傳入一個可以訪問舊狀態值的函式。因此，現在我們將通過更改 setNum(num + 1); 來更改 IncrementByFive 函式到 setNum(prevNum => prevNum + 1);。

因此，我們的函式將如下所示。

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

現在，讓我們測試我們的計數器應用程式。

輸出：

使用 prevState 的具有 incrementby5 函式的計數器應用程式

在上面的結果中，當我們點選 Increment by 5 時，它會增加 5。

讓我們也使用 prevState 來更正我們的其他按鈕。

Counter.js 如下所示。

# 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;

因此，在本指南中，我們瞭解了可以使用 prevState 解決的問題，並且我們還使用 setState 和 prevState 在 React 中構建了一個基本的計數器應用程式。

作者： Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.