[React]useStateでオブジェクト(連想配列)や配列の一部を更新する方法
私はいつも、ReactのuseStateでオブジェクト(連想配列)の更新に手を焼いています。 どうやるんだっけ？ ということで、この記事に更新のやり方を残しておきます。 useStateでオブジェクトを更新する方法 オブジェクトの一部だけ変更 const [state, setState] = useState({ id: 1, name: 'foo' }); const updateState = () => { setState((prevState) => ({ ...prevState, name: 'bar' })); // { id: 1, name: 'bar' } }; 前の状態(ここではprevState)を関数として渡して、オブジェクトの一部を書き換えています。 …prevStateはスプレッド構文といって、オブジェクトの要素を展開します。 name: ‘bar’は上書
![[React]useStateでオブジェクト(連想配列)や配列の一部を更新する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f7b670b37ab90694daf805b6f5c4908576a2722/height=288;version=1;width=512/https%3A%2F%2Famateur-engineer.com%2Fwp-content%2Fuploads%2F2022%2F05%2Fundraw_React_re_g3ui.png)
配列の要素削除はsplice()で。（配列とかおれおれAdvent Calendar2018 – 06日目） | Ginpen.com
const arr = [11, 22, 33, 44, 55]; const index = 2; console.log(arr[index]); // => 33 arr.splice(index, 1); console.log(arr); // => [ 11, 22, 44, 55 ] 第2引数 1 を忘れるとごそっと消え去るので気を付けてください。 仕様 Array.prototype.splice() – JavaScript | MDN array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 対象の配列は破壊的に変更されます。 引数 start … 削除開始する位置。先頭は 0 。負数の場合、後ろから数える deleteCount … 削除する数。初期値は array.length - start item1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
