HOWTO · React
React 中的 setState 和 prevState
本教程演示了 React 中的 setState 和 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>
);
}
現在，讓我們測試一下我們的計數器。
輸出：
讓我們新增另一個按鈕，將計數器增加 5。
# react
<button onClick={IncrementByFive}>Increment By 5</button>
讓我們建立一個函式 IncrementByFive。
# react
const IncrementByFive = () => {
for (let i = 0; i < 5; i++) {
setNum(num + 1);
}
};
此函式將迴圈五次以將其遞增 5。
現在，讓我們測試我們的計數器應用程式。
輸出：
當我們點選 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);
}
};
現在，讓我們測試我們的計數器應用程式。
輸出：
在上面的結果中，當我們點選 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 中構建了一個基本的計數器應用程式。
