[React ooks]useStateで配列を更新する

  • 2021年2月26日
  • 2021年7月5日
  • React
  • 14view

useStateで配列の更新が上手くいかない

コードサンドボックスにコードは添付しています。

「usersの追加」を押しても更新できない。


原因を探る

コードを見ると以下の部分がうまく機能していなさそう。

function addUser() {
    users.push({
      name: "Jordan"
    });
  }

ブレークポイントを貼って動きを見てみると、user配列自体に値はちゃんとpushされている。

が再描画が入っていない。

ググってみる。

【React】 useStateで配列を保存するときの注意点

https://qiita.com/naogify/items/cef4330858d0c677e71b

Reactではstateの値が変化した時にコンポーネントが再描画されます。
stateの値の変化を、Object.is() で判定しているとのことです。なので、pushやspliceでは前回と同じ値と判定されるそうです。

なるほど。
つまりpushなどを使わずに配列をコピーして追加していくのがuseState流らしい。
と言う事でスプレット構文を使ってusersのstateを作り直します。

const [users, setUsers] = useState([]);
  function addUser() {
    setUsers([...users, { name: "Jordan" }]);
  }

ちゃんと動きます。

めでたしめでたし

まとめ

useStateでは配列のpushは再描画されない。スプレット構文で新しい配列を作ろう。

告知

Reactに関して初学者向けのチュートリアル記事をいくつか作っています。
是非学習の参考にして下さい。
【React+TypeScript】Netflixのクローンを作るチュートリアル
【 React Hooks入門】useStateを使って買い物リストを作るチュートリアル
React + TypeScriptでコネクト4を作った報告(クラスコンポーネント)
ReactでのCOVID-19トラッカー作成で学べる3つの事


技術ブログではフロントエンドの情報を中心に発信しています。
技術ブログ
Twitter

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping