本記事では、ReactのuseStateで配列を使う方法について解説しています。
- JavaScriptの基礎から始めてReactの機能を一通り学べる
- 実務で必要となる知識を意識しながら学習を進められる
- 現場のシチュエーションベースのストーリーで技術解説
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
変数名/関数名にもう悩まない!
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
useStateで配列を使う方法
useStateで配列を使用したサンプルコードを用意したので、これを利用して解説していきます。
コードの内容は、テキストフォームに値を入力しフォーカスを外すと入力値が配列に代入されliタグに展開されるシンプルなものです。※key属性に入力値をセットしているため、同じ値を入れるとコンソールログにエラーが表示されます。
import { useState } from "react";
function App() {
const [fruits, setFruits] = useState([]);
const [value, setValue] = useState("");
const blurEvent = (e) => {
const newFruits = [...fruits];
newFruits.push(e.target.value);
setFruits(newFruits);
setValue("");
};
const changeEvent = (e) => {
setValue(e.target.value);
};
return (
<>
<ul>
{fruits.map((v) => (
<li key={v}>{v}</li>
))}
</ul>
好きな果物を入力してください:
<input
type="text"
value={value}
onBlur={blurEvent}
onChange={changeEvent}
/>
</>
);
}
上記のコードで一番注目して欲しいポイントは「import { useState } from “react”;」「const [fruits, setFruits] = useState([]);」「const newFruits = […fruits];」の3点です。
import { useState } from “react”;
import { useState } from "react";
useStateはreact機能の一つなのでimportをしないと使用することは出来ません。もし、importせずにuseStateを使用すると「Uncaught ReferenceError: useState is not defined」とエラーが表示されます。
const [fruits, setFruits] = useState([]);
const [fruits, setFruits] = useState([]);
これはuseStateの初期値に空配列を指定しています。するとuseStateは配列形式で0番目に初期値で設定した空配列を、1番目には0番目の空配列を更新する時に使用する更新用関数を代入するので分割代入で受け取ります。
const newFruits = […fruits];
const newFruits = […fruits];
これはスプレッド構文で配列のコピーをしています。もし、配列をコピーせずにuseStateで渡された値を直接更新してしまうと上手く動作しないので注意してください。
また、下記のようなコピーはコピー元とコピー先の値が格納されている参照先(アドレス)が変わらないためアウトな書き方です。
const newArr = arr;
わざわざ新しい配列をコピーする変数を用意するのが面倒くさいという人は、useStateの値を更新する際に使用する更新用関数内で新しく配列を生成することも可能です。
const blurEvent = (e) => {
// const newFruits = [...fruits];
// newFruits.push(e.target.value);
// 1行でも書ける!
setFruits([...fruits, e.target.value]);
};