React での配列操作
本記事は以下の記事の続きです。
配列へ要素を追加するには
配列へ要素を追加する方法にはスプレッド構文や配列のメソッドなどいくつかの方法あります。
useStateが配列の変更を検知できるよう、新しい配列を返すような方法によって要素を追加することが推奨されます。
スプレッド構文による追加
スプレッド構文...によって元の配列を新たな配列に展開し、要素を追加する方法です。
const array = [1, 2, 3]
const newArray = [...array, 4]
console.log(newArray)
//[ 1, 2, 3, 4 ]
console.log(Object.is(newArray, array))
// false
上の例では、別の配列の中に元の配列arrayを展開し、その後ろに4を追加しています。
Object.is(newArray, array)がfalseとなっていることから、newArrayとarrayが別の値であることがuseStateのset 関数によって検知可能であることがわかります。
元の配列の前後に要素を追加する際に有用ですね。
新たに配列を返すメソッド
Array.prototype.concat()
concat()を使用して要素を追加することもできます1。
concat()は、複数の配列を合併し、新しい配列を返すメソッドです。
追加したい要素を持つ配列をconcat()によって結合することで、目的の配列を取得できます。
const array = [1, 2, 3]
const newArray = array.concat([4])
console.log(newArray)
//[ 1, 2, 3, 4 ]
console.log(Object.is(newArray, array))
// false
concat()によって新しい配列が返されているため、Object.isによって別の配列であると判定されるようになっていますね。
既存の配列に変更を加えるメソッド
Array.prototype.push()
push()は元の配列の末尾に要素を追加するメソッドで、返り値は要素追加後の配列の長さになります。
setStateによって変更が検知されない様子は以下の例でも確認できます。
add 4ボタンをクリックするとstate配列に4が追加されるコードとなっています。
import { useState } from "react";
function App() {
const [state, setState] = useState([1, 2, 3]);
const clickHandler = () => {
state.push(4);
setState(state);
};
const [triger, setTriger] = useState(true);
return (
<div>
<div>{`${state}`}</div>
<button onClick={clickHandler}>add 4</button>
<button
onClick={() => {
setTriger(!triger);
}}
>
render
</button>
</div>
);
}
export default App;
add 4ボタンをクリックしても画面上の表示は1,2,3のままで変化が起こりません。
これは、state.push(4)によってstateに変更を加えても、setStateには同じ配列であるとみなされるため、再レンダリングがされません。
renderボタンを押してみると、add 4ボタンを押した回数と同じ分だけ4が追加されてレンダリングされることが確認できます。
配列stateには確かに変更が加わっていますが、画面へ反映されていなかったわけですね。
Array.prototype.unshift()
unshift()は元の配列の先頭に要素を追加するメソッドで、返り値は要素追加後の配列の長さになります。
要素の追加位置は異なりますが、push()によく似たメソッドとなっています。
const array = [1, 2, 3]
const length = array.unshift(4)
console.log(array)
// [ 4, 1, 2, 3 ]
console.log(length)
// 4
unshiftによってstateを操作した場合にも、変更が検知されないため注意が必要です。
-
concat はconcatenate の略で、「連結」の意。 ↩