useStateで配列を使っていく
初期値の内容に応じて配列を作る。空配列でもOK！！
export default function Home() {
const [array, setArray] = useState([1,2,3]);
return (
<>
<button onClick={handleAdd}>追加</button>
<ul>
{array.map((item) => {
return <li key={item}>{item}</li>;
})}
</ul>
</>
)
}
ちなみに上記のコードでは[1]・[2]・[3]の三つが配列に加わり、<li>が三つ追加される。
export default function Home() {
const [array, setArray] = useState([]);
const handleAdd = useCallback(() => {
setArray((array) => {
const newArray = [...array,1]
return newArray;
});
},[])
return (
<>
<button onClick={handleAdd}>追加</button>
<ul>
{array.map((item) => {
return <li key={item}>{item}</li>;
})}
</ul>
</>
)
}
上記のコードでは「追加」を押したら、配列に「1」が追加されていく。
setArray((array) => {
const newArray = [...array,1]
return newArray;
});
ここの部分を解説。
setArrayの中が関数になっているので、前回の配列情報を使える。
「追加」がクリックされるとその時の配列を認識(arrayのこと)し、「１」を追加した新しい配列をnewArrayに格納する。(破壊的であるpushを非破壊的に記述している。)
そして仕上げにnewArrayをreturnで返す。
※key(1)の被りでエラーが出ると思うが、実際の実装ではデータベースのID等を使うと思うので一旦無視
入力したテキストを配列に格納していきたい
import { useCallback, useEffect, useState } from 'react';
export default function Home() {
const [text , setText] = useState("");
const [array, setArray] = useState([1,2,3]);
{/* ここのtextに注目 */}
const handleAdd = useCallback(() => {
setArray((array) => {
const newArray = [...array,text]
return newArray;
});
},[text])
return (
<>
<input type="text" value={text} onChange={e => {
setText(e.target.value);
}} />
<button onClick={handleAdd}>追加</button>
<ul>
{array.map((item) => {
return <li key={item}>{item}</li>;
})}
</ul>
</>
)
}
handleAdd関数部分の解説。
textはuseStateを使ったインプットタグの入力値。
引数のarrayで前回の配列を受け取り、その配列にtextを追加する。変更点は追加されたtextだけなので、新たにtextだけが追加される。
注意点は第二引数に[text]を書き忘れないこと！
何故ならコールバック関数を使っているため、textを変更したところでhandleAddは再レンダリングされない。一番初めに[1,2,3]を取得し、そのままになってしまう。
ちなみにsome(配列の中の少なくとも1つの要素が当てはまるかどうかを判定し、trueかfalseを返す)を使うと、二重登録を防ぐ事もできる！
return arrayを記述しないとその下の処理が実行されて、結局追加されてしまうので忘れないように！
const handleAdd = useCallback(() => {
setArray((array) => {
if (array.some((item) => item === text)) {
alert("既に存在しています");
return array;
}
const newArray = [...array,text]
return newArray;
});
},[text])
(非)破壊的メソッドとは
破壊的メソッドとは、元のデータ(今回だと配列)が変更されることをいう。
そのため変更前の配列を使用するために変数を指定しても、思っている結果と違うことがある。
それに比べて非破壊的メソッドとは、新しい配列を用意して作業することで、元のデータを保持することができる。
そこで役に立つのがスプレッド構文なのだが、改めて復習したいと思う。
あらためてスプレッド構文のおさらい
const arr = ['一つ目', '二つ目'];
console.log(arr);//['一つ目', '二つ目']
console.log(...arr);//一つ目 二つ目
arrをそのまま出力すると配列をそのまま出力され、...arr(スプレッド構文)を出力すると配列の中身が個別で出力される。
それを応用すると、要素を簡単に引数に入れることができる
onst arr = [1, 2, 3, 4, 5];
const newArr = (num1, num2, num3, num4, num5) => {
return num1 + num2 + num3 + num4 + num5;
};
console.log(newArr(arr[0], arr[1], arr[2], arr[3], arr[4]));//15
console.log(newArr(...arr));//15
同じ15が返るのにconsole.log(newArr(...arr))の方が圧倒的に楽！
そしてここからが重要
配列をコピーしたい！！！
//下記の配列を変数arr5に代入したい！
const arr = [1, 2, 3, 4, 5];
const arr5 = arr;
console.log(arr5);//[1, 2, 3, 4, 5]
無事arr5の中身が[1, 2, 3, 4, 5]になったのでめでたしめでたし！！ではない。
その理由が下記コード。
arr5[0] = 800;
console.log(arr);//[800, 2, 3, 4, 5]
console.log(arr5);//[800, 2, 3, 4, 5]
あれ？arr5しか変更してないのに、arrまで変わってしまっている、、、
（てかReactって状態が変更されないと再レンダリングされないじゃん？元の配列も一緒に変わったんなら、一生状態に変更がないから再レンダリングされないよね・・・。おもしろ・・・。
元の状態と差異を出すためにも、非破壊的メソッドを使って再レンダリングさせるのか。）
そうつまり配列のコピーは「ニ○・ロビン」とようなものなのだ。
たくさん分身は出せるけど、そのダメージは何故か自分にかえってくる。
ということでニ○・ロビン = 非破壊的メソッドという式が成り立つ。
スプレッド構文を使って非破壊的メソッドにする
const arr = [1, 2, 3, 4, 5];
//ここを少しかえる
const arr5 = [...arr];
arr5[0] = 800;
console.log(arr);//[1, 2, 3, 4, 5]
console.log(arr5);//[800, 2, 3, 4, 5]
よし！これで本当にめでたしめでたし！！
何故こうなったのかというと、const arr5 = [...arr]このように代入することでコピーではなく新しい配列を作ることができるからだ。
つまりニ○・ロビンのように見えてニ○・ロビンではないということだ。
なぜ破壊的メソッドがダメなのか
これを理解するためには「ミュータブル(変更可能)・イミュータブル(変更不可能)」について知る必要がある。
簡単にいうと一度値を作成した後に、その値を変更できるかどうかということ。
文字列や数値はデフォルトでイミュータブルになっている。
要は変数に何はアクションを与えたときに、参照元の変数(元の変数)に影響を与えないということ。
let str = "Hello";
str.concat(" World"); // 新しい文字列 "Hello World" が生成されるが、str の値は変わらない
let num = 10;
num + 5; // 新しい数値 15 が生成されるが、num の値は変わらない
それに比べて配列とオブジェクトはデフォルトでミュータブルになっている。
(参考コードは「あらためてスプレッド構文のおさらい」にあるよ)
そのため配列とオブジェクトもイミュータブルとして扱うべく、破壊的メソッドを避けるような記述をするようになった。