こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
独学でReactをマスターしたい人へ
こちらの記事で学習の手順や教材について詳しく解説しています。
こんにちは、フロントエンドエンジニアのてりーです。 僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。 ノウハウがたまってきたので、React + TypeScriptの勉強[…]
では、どうぞ！
useStateで配列の更新が上手くいかない
useStataeで
「usersの追加」を押しても更新できない。
wizardly-hooks-ninik using react, react-dom, react-scripts…
原因を探る
コードを見ると以下の部分がうまく機能していなさそう。
<code class="">function addUser() {
users.push({
name: "Jordan"
});
}ブレークポイントを貼って動きを見てみると、user配列自体に値はちゃんとpushされている。
が再描画が入っていない。
ググってみる
【React】 useStateで配列を保存するときの注意点
useStateで配列を保存する時は、新しい配列を生成して保存しないと再描画されません。サンプルコード×： 再描画されな…
Reactではstateの値が変化した時にコンポーネントが再描画されます。
stateの値の変化を、Object.is() で判定しているとのことです。なので、pushやspliceでは前回と同じ値と判定されるそうです。
なるほど。
つまりpushなどを使わずに配列をコピーして追加していくのが良いらしい！
pushを使わずに、スプレッド構文に修正
と言う事でスプレット構文を使ってusersのstateを作り直します。
<code class="">const [users, setUsers] = useState([]);
function addUser() {
setUsers([...users, { name: "Jordan" }]);
}めでたしめでたし
まとめ
useStateでは配列のpushは再描画されない。スプレット構文で新しい配列を作ろう。
Reactの独学がある程度できてる方へ
Reactが独学である程度学べたら、チーム開発に飛び込むのがおすすめです！
いきなり案件は難しいと思うので、未経験でもチーム開発が経験できるサービスを使って、実戦の中でしか学べないスキルを磨いていきましょう！
・未経験向けのチーム開発を経験して、脱未経験になってから転職orフリーランス独立を目指そう ・未経験でもお金をかけずにチーム開発が経験出来るサービス紹介 こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこち[…]
またこちらの記事ではおすすめの転職エージェントや転職先を解説しています。
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら ・未経験からのエンジニア転職の心構え ・未経験のITエンジニア転職におすすめの転職エージェント・転職先 では、どうぞ！ すぐに登録したい方へ ・[…]