はじめに
課題として学習記録アプリをReactで作っていく中で躓いた点があったので記憶が鮮明なうちに記事にまとめてみました。
問題
学習内容と学習時間を学習記録の値を保持するuseStateのstateに追加していく、という実装がうまくいかなかった。
書いたコードとしては
newState = (…state,追加したい値)
なぜ"()"を使用しているのか、stateの性質を理解していないために何となく使用していることが分かります...
そもそもstateは配列あらゆるデータ型を保持することができる変数という認識がなかったため、配列にオブジェクト（今回であれば学習内容と学習時間を保持するオブジェクト）を追加する
解決方法
配列にオブジェクトを追加することで解決できた。
const [records, setRecords] = useState([]);
const newRecord = { title: contents, time: time };
const updatedRecords = [...records, newRecord];
今回はrecordsという配列のコピーをスプレッド構文で作成し、そこにnewRecordというオブジェクトを追加しています。
おわりに
useStateの構文
const [state, setState] = useState(initialState)
const右側の[]をみた時点で、配列の中にstateという変数のようなものとsetStateというstateを更新する関数がある、というざっくりとしたイメージで捉えていたため、stateが配列あらゆるデータ型を保持することができる変数であるという根本的な性質を理解していなかったことが原因でした。
またこの[]が配列の分割代入によるものだということを恥ずかしながら初めて知りました
...
初学者のため間違った内容などありましたら是非ご指摘お願いします🙏
参考
React公式
https://ja.react.dev/reference/react/useState
【JavaScript】スプレッド構文やオブジェクト型を理解する
https://zenn.dev/peishim/articles/a2c12108b9a15c