react 配列を付け足したい

Question

reactとtypescriprtを使っています。
ボタンが押されたらstateのitemsにitemを追加したいです。
ボタンが押されたらsetItems({ ...items, item });でitemsに押されたitemを付け加える処理を書いたのですがconsole.logで確認したところ、値が上書きされてしまいitemsに押下された値を付け足していくことができません。
わかる人いましたらご教授お願いしたいです。

import React, { FunctionComponent, useState } from 'react';

type Item = {
  id: number;
  name: string;
};

const Test: React.FunctionComponent = () => {
  const [items, setItems] = useState<Item[]>([]);

  const onClickItem = (item: Item) => {
    setItems({ ...items, item });
  };
  return (
    <>
      {fruits.map(() => (
        <button key={fruit.id} onClick={() => onClickItem(fruit)}>
          {fruit.name}
        </button>
      ))}
    </>
  );
};

export default Test;

export const fruit: [
    {
      id: 1,
      name: 'りんご',
    },
    {
      id: 2,
      name: 'みかん',
    },
    {
      id: 3,
      name: 'なし',
    },
    {
      id: 4,
      name: 'ぶどう',
    },
  ]

Answer 1

配列を{...}でスプレッドするのは適切ではありません。[...]としましょう。

あと、「もとの値を使って次の値を作る」ような処理の際には、setItemsへの引数は関数としたほうがいいです。

  const onClickItem = (item: Item) => {
    setItems(oldItems => [...oldItems, item]);
  };

  // 配列のメソッドを使ったこんな形でもいい
  const onClickItem = (item: Item) => {
    setItems(oldItems => oldItems.concat([item]));
  };

Comments

[kakedashidesu]

ありがとうございます！
配列を{...}でスプレッドするのは適切ではありません。とありますがなぜ適切ではないのでしょうか？

[maisumakun]

スプレッド後のものが配列ではなくなります。

[kakedashidesu]

ありがとうございます！！

Answer 2

setItems({ ...items, item });だとオブジェクトで上書きしてしまいます。
正しくはsetItems([ ...items, item ]);では？