Javascript 切换到移动模式后，减量功能变为增量功能

我正在开发一个旋转木马组件，当我在桌面模式下测试它时，它工作得非常好，但在我出于某种原因将页面切换到移动模式后，我的递减功能（应该是向后切换旋转木马图像）开始增加我的图像索引（因此旋转木马图像开始向前移动）。我不知道是什么原因造成的

在这里，您可以看到我所说的函数：

function btnToRight () {  
        if(currentIndex ===(imgs.length)) {setCurrentIndex(0); setMovement(0)} else {setCurrentIndex(prevCount => prevCount + 1); setMovement(currentIndex*imageWidth)};
        console.log(`chosen image is ${currentIndex} and current position in ${movement}`);
         
        
    }
    function btnToLeft () { 
        if(currentIndex===0) {setCurrentIndex(imgs.length-1); setMovement(currentIndex*imageWidth)} else {setCurrentIndex(prevCount => prevCount - 1); setMovement(currentIndex*imageWidth)}
        console.log(`chosen image is ${currentIndex} and current position in ${movement} direction left`);

如果有必要，您可以在这里看到整个代码：

import React, {useState} from 'react'
import imgs from './images'
import './styles.css'

function App () {
    const [currentIndex, setCurrentIndex] = useState(0)
    const [movement, setMovement] = useState(0)
    const [windowsWidth] = useState(360)
    const [transitionDuration, setStransitionDuration] = useState(0)
    const [imageWidth, setImageWidth] = useState(360)
    const [lastTouch, setLastTouch] = useState(0)
    const newSlide = imgs.map((slide) => (<img key={slide.id} src={slide.src} alt="slide-img" className="carousel-image" 
    style={{width: `${imageWidth}px`}}/> ))

    //functionality part
    const handleMovementX = (delta) => {
        
          const maxLength = imgs.length - 1;
          let nextMovement = movement + delta;
    
          if (nextMovement < 0) {
            nextMovement = 0;
          };
    
          if (nextMovement > maxLength * windowsWidth) {
            nextMovement = maxLength * windowsWidth;
            //setCurrentIndex(currentIndex+1)
          };
    
          return (
            setMovement(nextMovement)
          );
      }; 

      const handleMovementEnd = () => {
    
        const endPos = movement / imageWidth;
        const endPartial = endPos % 1;
        const endingIndex = endPos - endPartial;
        const deltaInteger = endingIndex - currentIndex;
    
        let nextIndex = endingIndex;
    
        if (deltaInteger >= 0) {
          if (endPartial >= 0.1) {
            nextIndex += 1;
          }
        } else if (deltaInteger < 0) {
          nextIndex = currentIndex - Math.abs(deltaInteger);
          if (endPartial > 0.4) {
            nextIndex += 1;
          }
        }
        transitionTo(nextIndex, Math.min(0.5, 1 - Math.abs(endPartial)));
      }; 
      const transitionTo = (index, duration) => {
        
            setCurrentIndex(index+1)
            setMovement(index * imageWidth,)
            setStransitionDuration(`${duration}s`)
            
        }



    // button part
    function btnToRight () {  
        if(currentIndex ===(imgs.length)) {setCurrentIndex(0); setMovement(0)} else {setCurrentIndex(prevCount => prevCount + 1); setMovement(currentIndex*imageWidth)};
        console.log(`chosen image is ${currentIndex} and current position in ${movement}`);
         
        
    }
    function btnToLeft () { 
        if(currentIndex===0) {setCurrentIndex(imgs.length-1); setMovement(currentIndex*imageWidth)} else {setCurrentIndex(prevCount => prevCount - 1); setMovement(currentIndex*imageWidth)}
        console.log(`chosen image is ${currentIndex} and current position in ${movement} direction left`);
    }
    const choosePic = (e) =>{
        console.log(`chosen image is ${currentIndex}`)
        setCurrentIndex(e.target.innerHTML-1)
        setMovement(currentIndex*imageWidth)
        console.log(`current position in ${movement}`)
    }

    //touch part
    const handleTouchStart = (e) => { 
        setLastTouch(e.nativeEvent.touches[0].clientX);
      };
    const handleTouchMove = (e) => {
        setLastTouch(e.nativeEvent.touches[0].clientX);
        const delta = lastTouch - e.nativeEvent.touches[0].clientX;
        handleMovementX(delta);
      };
    const handleTouchEnd = () => {
        handleMovementEnd();
        setLastTouch(0);
      };

    return (
        <div className="app">     
            <div className="main-container"
            style={{width: `${imageWidth}px`}}
            onTouchStart={handleTouchStart}
            onTouchMove={handleTouchMove}
            onTouchEnd={handleTouchEnd}>
                <div className="carousel-container" style={{transform: `translateX(-${movement}px)`,
            transitionDuration: transitionDuration}}>
            {newSlide}
                </div>
                <button onClick={btnToRight} className="btn right">right</button>
                <button onClick={btnToLeft} className="btn left">left</button>
                
            
            </div>
            {imgs.map((slide) => (
                <button key={slide.id} onClick={choosePic} className={`selected-img
                 ${(slide.id===currentIndex+1) ? "currently-selected" : "not-selected"}`}
                
                >{slide.id}</button>
                ))}
        </div>
    )
}

export default App

import React，{useState}来自“React”
从“./images”导入IMG
导入“./styles.css”
函数应用程序（）{
常数[currentIndex，setCurrentIndex]=useState（0）
const[movement，setMovement]=useState（0）
常数[windowsWidth]=useState（360）
const[transitionDuration，setTransitionDuration]=useState（0）
常量[imageWidth，setImageWidth]=useState（360）
常量[lastTouch，setLastTouch]=useState（0）
const newSlide=imgs.map（（幻灯片）=>（））
//功能部件
常量handleMovementX=（增量）=>{
常量maxLength=imgs.length-1；
让nextMovement=移动+增量；
如果（下一个移动<0）{
nextMovement=0；
};
如果（下一个移动>最大长度*窗口宽度）{
下一步移动=最大长度*窗口宽度；
//setCurrentIndex（currentIndex+1）
};
返回(
设置移动（下一个移动）
);
}; 
const handleMovementEnd=（）=>{
const endPos=移动/图像宽度；
const endPartial=endPos%1；
常量endingIndex=endPos-endPartial；
常数deltaInteger=endingIndex-currentIndex；
设nextIndex=endingIndex；
如果（deltaInteger>=0）{
如果（endPartial>=0.1）{
nextIndex+=1；
}
}else if（deltaInteger<0）{
nextIndex=currentIndex-Math.abs（deltaInteger）；
如果（endPartial>0.4）{
nextIndex+=1；
}
}
转换到（nextIndex，Math.min（0.5，1-Math.abs（endPartial））；
}; 
常量转换=（索引，持续时间）=>{
setCurrentIndex（索引+1）
设置移动（索引*图像宽度）
SetTransitionDuration（`${duration}s`）
}
//按钮部件
函数btntRight（）{
如果（currentIndex==（imgs.length））{setCurrentIndex（0）；setMovement（0）}其他{setCurrentIndex（prevCount=>prevCount+1）；setMovement（currentIndex*imageWidth）}；
log（`selected image是${currentIndex}，当前位置在${movement}`）；
}
函数btnToLeft（）{
if（currentIndex==0）{setCurrentIndex（imgs.length-1）；setMovement（currentIndex*imageWidth）}else{setCurrentIndex（prevCount=>prevCount-1）；setMovement（currentIndex*imageWidth）}
log（`selected image是${currentIndex}，当前位置在${movement}方向左`）；
}
const choosePic=（e）=>{
log（`selected image为${currentIndex}`）
setCurrentIndex（e.target.innerHTML-1）
设置移动（当前索引*图像宽度）
log（`current position in${movement}`）
}
//触摸部分
常量handleTouchStart=（e）=>{
setLastTouch（e.nativeEvent.touchs[0].clientX）；
};
常量handleTouchMove=（e）=>{
setLastTouch（e.nativeEvent.touchs[0].clientX）；
const delta=lastTouch-e.nativeEvent.Touchs[0].clientX；
handleMovementX（三角洲）；
};
常量handleTouchEnd=（）=>{
handleMovementEnd（）；
setLastTouch（0）；
};
返回(
{newSlide}
正确的
左边
{imgs.map（（幻灯片）=>(
{slide.id}
))}
)
}
导出默认应用程序

我刚刚发现了这一点。当我切换到移动模式时，“onTouch”eventHandler打开，并在每次单击屏幕时添加额外的级别。我添加了一个条件语句来关闭这个函数。