React の setState と prevState
setState と prevState を紹介し、React で使用します。
React の setState と prevState
setState() と prevState() は、React クラスコンポーネントの状態を変更するために使用される useState フックです。
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つ増やすボタンをもう 1つ追加しましょう。
# react
<button onClick={IncrementByFive}>Increment By 5</button>
関数 IncrementByFive を作成しましょう。
# react
const IncrementByFive = () => {
for (let i = 0; i < 5; i++) {
setNum(num + 1);
}
};
この関数は 5 回ループして、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 で基本的なカウンターアプリを構築しました。
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