当我快速单击 goToNext 按钮时，轮播的 currentIndex 无限增加

Question

当我快速点击

currentIndex

按钮时，轮播的

goToNext

无限增大，该怎么办？ 我现在是一个学习 React 的菜鸟，我决定自己做一些项目。现在，当我尝试制作旋转木马时，遇到了问题。 正如您所看到的，这是原始版本。它应该是什么（https://i.sstatic.net/LhhDbMMd.png）这是

currentIndex

我console.log输入图像描述在这里 但是如果我点击得很快，就会变成这样。在此处输入图像描述这里是当前索引在此处输入图像描述 currentIndex 变得更大并且永远不会回来。

以下是我的代码。

import React, { useState,useEffect } from 'react';
import './goodsLunbo.scss';
const GoodsCarousel = ({ items }) => {
  const [currentIndex, setCurrentIndex] = useState(1);
  const itemsWithClones = [items[items.length - 1], ...items, items[0]];
  const [isTransitioning, setIsTransitioning] = useState(true);
  const goToPrevious = () => {
    if(isTransitioning){
      const newIndex = currentIndex - 1;
      setCurrentIndex(newIndex);
    }
  };
  const goToNext = () => {
    if(isTransitioning){
    const newIndex = currentIndex + 1;
    setCurrentIndex(newIndex);
    }
    console.log(currentIndex)
  };
  const handleTransitionEnd = () => {
    if (currentIndex === 0) {
      setIsTransitioning(false);
      setCurrentIndex(items.length)
     } else if (currentIndex === items.length + 1) {
      setIsTransitioning(false);
      setCurrentIndex(1);
    }
  };
  useEffect(() => {
    const transitionTimeout = isTransitioning ? null : setTimeout(() => {
      setIsTransitioning(true);
    }, 5);
    return () => {
      if (transitionTimeout) {
        clearTimeout(transitionTimeout);
      }
    };
  }, [currentIndex]);
  return (
    <div className="goodscarousel">
      <button className="prev" onClick={goToPrevious}>{"<"}</button>
      <div className="goodsItem">
            <div className='goodsContainer'>
            {itemsWithClones.map((it, index) => {
              return it.map((i,ix)=>{
            const key = Object.keys(i)[0];
            const value = i[key];
            return (
            <div key={ix} id={index} className='goods' 
            onTransitionEnd={handleTransitionEnd} 
            style={{ transform: `translateX(-${currentIndex * 387}px)`,transition: isTransitioning?"transform 0.3s ease-in-out":"none"}}>
                {value}
            </div>
            );
           });
          })
          } 
            </div>
      </div>
      <button className="next" onClick={goToNext}>{">"}</button>
    </div>
  );
};

export default GoodsCarousel;

我应该怎么做才能解决这个问题？

Answer 1

解决这个问题最简单的方法是使用模运算

%

。您可以直接将行为编程到

handleTransitionEnd

和

goToNext

函数中，而不是使用

goToPrevious

函数。

这是代码：

const goToPrevious = () => {
  if(isTransitioning){
  const newIndex = currentIndex - 1;
  setCurrentIndex(newIndex % items.length); //added mod operation
  }    
};

const goToNext = () => {
  if(isTransitioning){
  const newIndex = currentIndex + 1;
  setCurrentIndex(newIndex % items.length); //added mod operation
  }
};