带有复选框的Nextjs typescript过滤表

// pages/index.tsx
import { useState } from 'react';

interface Item {
  id: number;
  name: string;
  category: string;
}

const items: Item[] = [
  { id: 1, name: 'Item 1', category: 'A' },
  { id: 2, name: 'Item 2', category: 'B' },
  { id: 3, name: 'Item 3', category: 'A' },
  // ...更多数据
];

export default function Home() {
  const [categoryFilter, setCategoryFilter] = useState<string[]>([]);
  const filteredItems = items.filter(item => 
    categoryFilter.length === 0 || categoryFilter.includes(item.category)
  );

  return (
    <div>
      <h1>过滤表示例</h1>
      <div>
        <label>
          <input 
            type="checkbox" 
            value="A" 
            onChange={e => {
              const newFilter = [...categoryFilter];
              if (e.target.checked) {
                newFilter.push('A');
              } else {
                newFilter.splice(newFilter.indexOf('A'), 1);
              }
              setCategoryFilter(newFilter);
            }}
          />
          类别 A
        </label>
        <label>
          <input 
            type="checkbox" 
            value="B" 
            onChange={e => {
              const newFilter = [...categoryFilter];
              if (e.target.checked) {
                newFilter.push('B');
              } else {
                newFilter.splice(newFilter.indexOf('B'), 1);
              }
              setCategoryFilter(newFilter);
            }}
          />
          类别 B
        </label>
      </div>
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name} - {item.category}</li>
        ))}
      </ul>
    </div>
  );
}