React 中的 setState 和 prevState

Rana Hasnain Khan 2022年12月21日 2022年5月18日
React 中的 setState 和 prevState

我們將介紹 setStateprevState 並在 React 中使用它們。

React 中的 setStateprevState

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

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

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

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

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

Counter() 中,我們將初始化我們的常量 initialNumnumsetNum

# 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 解決的問題,並且我們還使用 setStateprevState 在 React 中構建了一個基本的計數器應用程式。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

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.

LinkedIn