如何筛选React中显示的产品数量？

import React, { useState } from 'react';

function ProductList() {
  const [productCount, setProductCount] = useState(10); // 默认显示10个产品

  // 其他组件代码

  return (
    <div>
      {/* 其他组件内容 */}
    </div>
  );
}

function ProductList() {
  const [productCount, setProductCount] = useState(10);

  const handleProductCountChange = (event) => {
    setProductCount(event.target.value);
  };

  return (
    <div>
      <label htmlFor="productCount">显示产品数量：</label>
      <input
        type="number"
        id="productCount"
        value={productCount}
        onChange={handleProductCountChange}
      />

      {/* 其他组件内容 */}
    </div>
  );
}

function ProductList() {
  const [productCount, setProductCount] = useState(10);

  const handleProductCountChange = (event) => {
    setProductCount(event.target.value);
  };

  const filteredProducts = allProducts.slice(0, productCount); // 假设allProducts是包含所有产品的数组

  return (
    <div>
      <label htmlFor="productCount">显示产品数量：</label>
      <input
        type="number"
        id="productCount"
        value={productCount}
        onChange={handleProductCountChange}
      />

      {filteredProducts.map((product) => (
        <Product key={product.id} {...product} />
      ))}
    </div>
  );
}