😎

useStateで配列を更新する

2021/03/01に公開

こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら

未経験から独学でフロントエンドエンジニアになる勉強方法をまとめたので、興味があれば是非!
https://terrblog.com/how-to-get-front-end-job/

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

https://codesandbox.io/s/wizardly-hooks-ninik?file=/src/App.js

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

原因を探る

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

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

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

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

ググってみる。
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" }]);
  }

ちゃんと動きます。
Image from Gyazo

めでたしめでたし

まとめ

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

関連記事

Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法をまとめました。
https://terrblog.com/react-typescript-how-to-master/

また1人でReactを独学している人はこちらの記事も併せて読みましょう!
https://terrblog.com/team-programming/

Discussion

ログインするとコメントできます