typescript オブジェクトの配列にオブジェクトを追加する方法

Question

reacthook - typescriptで、クリックするたびにオブジェクトの配列に新オブジェクトを追加する処理を実装したいですが、最初の配列がundefinedにしたまま配列を追加していく(下記パターン2)方法はありませんか？

type item = { id: number, value: string }
// パターン(1) console -> (クリック回数+1) [{...},{...},...,{...}]
const [items, setItems] = useState<item[]>({id:0, value:"init"}) 
// パターン(2) console -> undefined
//const [items, setItems] = useState<item[]|undefined>() 


return(
  <button 
    onClick={() => {
        setItems(items.concat({id: 1, value: "hoge"})) // (1)
        /* setItems(items?.concat({id: 1, value: "hoge"})) (2)*/
        console.log(items)
      }
    }> 
    Add
  </button>
)

パターン(1)の場合は初期配列の分だけstateに保持される値が余分なのでこれを削りたいのでパターン(2)で実装したところオブジェクトはundefinedのままになってしまいます。

どうすればよいでしょうか？また、上記コードのほかに同じような目的を達成可能なコーディングがありましたら教えていただけるとありがたいです。

Answer 1

?.concatなので短絡評価を使ってundefiendの場合は空配列がセットされるようにしてみてはどうでしょう？

setItems(items?.concat({id: 1, value: "hoge"}) || [])

Comments

[yochun02]

ありがとうございます。
useState([])にしたらよりシンプルにできました。(空配列にもconcatが使えるとは（笑）)

[nekoniki]

> useState([])にしたらよりシンプルにできました
よく考えたらそうですね。そちらの方がシンプルで良いと思います！