如何在ReactJS中按类别id过滤结果

import React, { useState } from 'react';

// 过滤结果组件
const FilteredResults = ({ results }) => {
  return (
    <div>
      {results.map(result => (
        <div key={result.id}>{result.name}</div>
      ))}
    </div>
  );
};

// 类别选择器组件
const CategorySelector = ({ categories, onSelectCategory }) => {
  return (
    <div>
      {categories.map(category => (
        <button key={category.id} onClick={() => onSelectCategory(category.id)}>
          {category.name}
        </button>
      ))}
    </div>
  );
};

// 父组件
const App = () => {
  // 所有结果数据
  const allResults = [
    { id: 1, name: 'Result 1', categoryId: 1 },
    { id: 2, name: 'Result 2', categoryId: 2 },
    { id: 3, name: 'Result 3', categoryId: 1 },
    { id: 4, name: 'Result 4', categoryId: 3 },
  ];

  // 所有类别数据
  const allCategories = [
    { id: 1, name: 'Category 1' },
    { id: 2, name: 'Category 2' },
    { id: 3, name: 'Category 3' },
  ];

  // 当前选中的类别id
  const [selectedCategoryId, setSelectedCategoryId] = useState(null);

  // 根据类别id过滤结果数据
  const filteredResults = selectedCategoryId
    ? allResults.filter(result => result.categoryId === selectedCategoryId)
    : allResults;

  // 更新选中的类别id
  const handleSelectCategory = categoryId => {
    setSelectedCategoryId(categoryId);
  };

  return (
    <div>
      <h1>Filtered Results</h1>
      <CategorySelector categories={allCategories} onSelectCategory={handleSelectCategory} />
      <FilteredResults results={filteredResults} />
    </div>
  );
};

export default App;