[React]配列としてのstateにオブジェクトを追加したいが、そのやり方がわからない

Question

Reactそのものや配列・オブジェクトについてまだまだ理解できておらず、見当違いなことを言っているかもしれません。
アドバイスいただけると幸いです。

問題

trainingRecordsステート（配列）に
trainingRecordステート（オブジェクト）を追加したいのですが、型エラー？がでてしまいます。

const [ trainingRecords, setTrainingRecords ] = useState([]);

const [ trainingRecord, setTrainingRecord ] = useState({
    trainingName: "",
    trainingWeight: "none",
    trainingReps: "0",
})

const saveTrainingRecord = () => {
    if (!trainingRecords.length) {
      setTrainingRecords(trainingRecord);
    } else {
      const newRecord = {...trainingRecords, trainingRecord};
      setTrainingRecords(newRecord);
    }
};

saveTrainingRecordメソッドの中の書き方が間違っているためだと思われるのですが、どう書けばいいでしょうか？

備考

前回質問させていただいたものを、いただいた修正依頼をもとに作り直させていただきました。
筋トレSNSなるものをつくっていまして、
トレーニング名、重量、回数を入力フォームから受け取って格納するのがtrainingRecord、
それを複数格納して、最終的にデータベースに保存するのがtrainingRecordsです。

回答への返信

siruku6さん、ありがとうございます。
[]をつけてみると、

このように型'never'に割り当てられませんとでてしまいました。

そこで、もはや意味もわからずtrainingRecordsを次のように書き変えたところ無事レンダリングまではされるようになりました。
（初期値に{}を入れた）

const [ trainingRecords, setTrainingRecords ] = useState([{}]);

しかし、console.log(trainingRecords)でみてみると、
最初に「+」ボタンを押すと空のオブジェクトが作られて、
二度目で初めて入力内容が配列に追加されていることがわかりました。

最初の空のオブジェクトは不要なので作りたくないのですが、どう書けばいいでしょうか。

Answer 1

interface TrainingRecord {
  trainingName: string;
  trainingWeight: string;
  trainingReps: string;
}

でtrainingRecordオブジェクトの型を宣言し、

  const [ trainingRecord, setTrainingRecord ] = useState<TrainingRecord>({
    trainingName: "",
    trainingWeight: "none",
    trainingReps: "0",
  })
  const [ trainingRecords, setTrainingRecords ] = useState<TrainingRecord[]>([]);

trainingRecord の型は TrainingRecord 型のオブジェクト（<TrainingRecord>）
trainingRecords の型は TrainingRecord 型のオブジェクトの配列（<TrainingRecord[]>）を適用しました（参考）。

また今回、setStateした直後の配列をconsole.logで出力しようとしていたのですが、
こちらのQiitaの記事に「setState()は、引数にオブジェクトが渡された場合に、stateを即時にアップデートすることを保証しない」と書かれているように、うまくいかないこともあるようです。

Answer 2

配列でないといけないようなので、最初だけは

if (!trainingRecords.length) {
  setTrainingRecords([trainingRecord]);
} else {
  ...

にしてはいかがでしょう？

Comments

[siruku6]

（もしこれでよいのだとすると、else文の方もエラーが出そうな気がしますが...）

[moyong]

回答ありがとうございます。
本文の中で返信させていただきましたm(__)m

[siruku6]

useStateもtypescriptも使用していないので、これ以上はお役に立てなさそうです...
他の方に期待します。

少なくとも、ここに掲載しているソースコード以外の部分に問題がある可能性があるように見えるので、とりあえず関連する他のソースも掲載しておいた方がいいかと思います。

`never`なんちゃらという型になる原因にも問題があるかもしれませんし、全くそれとは関係ないところかもしれません

[moyong]

解決しました！
>>`never`なんちゃらという型になる原因にも問題があるかもしれません
trainingRecords配列に対して型を宣言していなかったため、neverとでてしまっていたようです。