react 配列を付け足したい

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: 'ぶどう',
    },
  ]

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

javascript
1  const onClickItem = (item: Item) => {
2    setItems(oldItems => [...oldItems, item]);
3  };
4
5  // 配列のメソッドを使ったこんな形でもいい
6  const onClickItem = (item: Item) => {
7    setItems(oldItems => oldItems.concat([item]));
8  };
9