[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)
Vuexライクなノンコンポーネント用ステート管理ライブラリ「Vanix」をつくってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、フロントエンドエンジニアのヒガです。 ここ最近の案件でNuxtを使っていたんですが、とっても素敵なフレームワークで恋に落ちちゃいそうでした。 でも、僕の対応する案件はそれらのフレームワークを使えないことも多く、フレームワークを使ったあとにそういった案件にとりかかると正直めんどうだなと感じることがあります。ですので、一部の機能だけでもいい感じにつかうことはできないかなと思いました。 目をつけたのはステート管理に関する機能です。NuxtでいうとVuexですね。公式サイトを引用するとこのように書いてあります。 Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 （引用元：https://vuex.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
