如何使用react钩子递增/递减每个项目

import React, { useState } from 'react';

function ItemList() {
  // 初始化项目列表和它们的计数器
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', count: 0 },
    { id: 2, name: 'Item 2', count: 0 },
    { id: 3, name: 'Item 3', count: 0 }
  ]);

  // 递增指定项目的计数器
  const increment = (id) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, count: item.count + 1 } : item
      )
    );
  };

  // 递减指定项目的计数器
  const decrement = (id) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, count: item.count - 1 } : item
      )
    );
  };

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          <span>{item.name}: {item.count}</span>
          <button onClick={() => increment(item.id)}>+</button>
          <button onClick={() => decrement(item.id)}>-</button>
        </div>
      ))}
    </div>
  );
}

export default ItemList;