ReactuseStateフックを使用すると、関数コンポーネントの状態を追跡できます。
状態は通常、アプリケーションで追跡する必要があるデータまたはプロパティを指します。
Import useState
useStateフックを使用するには、まずそれをコンポーネントにimportする必要があります。
例：
コンポーネントの先頭で、useStateフックをimportします。
import { useState } from "react";
useStateは名前付きエクスポートであるため、reactから構造化されていないことに注意してください。
初期化するuseState
関数コンポーネントでuseStateを呼び出して状態を初期化します。
useStateは初期状態を受け入れ、2つの値を返します。
例：
関数コンポーネントの上部で状態を初期化します。
import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("");
}
繰り返しますが、useStateから返される値を構造化していることに注意して下さい。
最初の値、colorは、現在の状態です。
2番目の値、setColorは、状態を更新するために使用される関数です。
これらの名前は、任意の名前を付けることができる変数です。
最後に、初期状態を空の文字列に設定します。useState("")
状態の読み取り
コンポーネント内のどこにでも状態を含めることができるようになりました。
例：
レンダリングされたコンポーネントで状態変数を使用します。
import { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return <h1>My favorite color is {color}!</h1>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
実行例(準備中です。) »
状態の更新
状態を更新するには、state updater関数を使用します。
状態を直接更新するべきではありません。例：color = "red"は許可されません。
例：
ボタンを使用して状態を更新します。
import { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
実行例(準備中です。) »
状態が保持できるもの
useStateフックを使用して、文字列、数値、ブール値、配列、オブジェクト、およびこれらの任意の組み合わせを追跡できます!
複数の状態フックを作成して、個々の値を追跡できます。
例：
複数の状態フックを作成します。
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [brand, setBrand] = useState("Ford");
const [model, setModel] = useState("Mustang");
const [year, setYear] = useState("1964");
const [color, setColor] = useState("red");
return (
<>
<h1>My {brand}</h1>
<p>
It is a {color} {model} from {year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
実行例(準備中です。) »
または、1 つの状態だけを使用して、代わりにオブジェクトを含めることもできます。
例：
オブジェクトを保持するフックを 1 つ作成します。
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
実行例(準備中です。) »
現在、単一のオブジェクトを追跡しているため、コンポーネントをレンダリングするときに、そのオブジェクトを参照してから、そのオブジェクトのプロパティを参照する必要があります (例:car.brand)
ステート内のオブジェクトと配列の更新
状態が更新されると、状態全体が上書きされます。
車の色だけを更新したい場合はどうすればよいでしょうか?
setCar({color: "blue"})のみを呼び出した場合、状態からブランド、モデル、および年が削除されます。
JavaScriptのスプレッド演算子を使用すると便利です。
例：
JavaScriptスプレッド演算子を使用して、車の色のみを更新します。
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
const updateColor = () => {
setCar(previousState => {
return { ...previousState, color: "blue" }
});
}
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
<button
type="button"
onClick={updateColor}
>Blue</button>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
実行例(準備中です。) »
stateの現在の値が必要なので、関数をsetCar関数に渡します。この関数は前の値を受け取ります。
次に、オブジェクトを返し、previousStateを展開し、色だけを上書きします。
