如何减少react旋转木马上可见的产品数量？

import React, { useState } from 'react';

const Carousel = ({ products }) => {
  const [visibleProducts, setVisibleProducts] = useState(5); // 初始显示5个产品

  return (
    <div>
      {products.slice(0, visibleProducts).map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
};

export default Carousel;

import React, { useState, useEffect } from 'react';

const Carousel = ({ products }) => {
  const [visibleProducts, setVisibleProducts] = useState(5);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 600) {
        setVisibleProducts(3); // 小屏幕显示3个产品
      } else {
        setVisibleProducts(5); // 大屏幕显示5个产品
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div>
      {products.slice(0, visibleProducts).map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
};

export default Carousel;