Banner

[choilv]

https://github.com/truongxuanha/ecommerce-project/blob/main/src/components/Banners/index.tsx

  useEffect(() => {
    const fetchBanners = async () => {
      try {
        const data = await getBanner();
        if (data?.data.status) setBanners(data.data.data);
      } catch (err) {
        console.error("Error fetching data:", err);
      }
    };
    fetchBanners();
  }, []);

Nếu được call ở redux hết cho đồng bộ code

  useEffect(() => {
    const interval: NodeJS.Timeout = setInterval(() => {
      setActiveIndex((prevIndex) => (prevIndex + 1) % banners.length);
    }, 3000);

    return () => {
      if (interval) clearInterval(interval);
    };
  }, [banners.length]);

interval là const rồi có cần check if (interval) không? 3000 cho vào constant, k dùng magic number

 useEffect(function () {}, []);

?

{banners.map((banner, index) => (
            <div
              key={index}
              className={`carousel-item flex justify-center w-full h-full p-6 rounded-md`}
            >
              <img className='w-full rounded-md' src={banner.image} />
            </div>
          ))}

nếu banner có id thì nên dùng key là id, trường hợp xấu nhất k có gì unique nữa mới dùng index