SetTimeout 不尊重 React JS 中的确定时间

如何解决SetTimeout 不尊重 React JS 中的确定时间

我构建了一个无限循环的 React carousel。在这个逻辑中，更改图像后，第一个放置在最后一个位置，但第二部分仅在触发 setTimeout 后发生。

css 过渡持续 0.8s 并且我设置了 setTimeout = 800，所以它会在过渡完成后被触发，只有在这一点上第一张图片才会被替换，所以用户将拥有无限循环的错觉。

它大部分时间都运行良好，但有时 setTimeout 被触发 before 0.8s（大约 0.4 秒）并且图像在它应该被替换之前被替换，这会导致一个奇怪的行为。

我尝试使用 transitionend 事件，但没有按预期工作，这就是我使用 setTimeout 的原因。

我想了解这里发生了什么。

附言这种行为没有规律，非常随机，大多数情况下滑块工作正常。

我的组件：

import React from 'react'

import classes from './MainSliderComponent.module.css'

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"


let mainSlides = [
    {
        img: require('../../../../assets/images/Header/MainSlider/imgSlider1-mainpage.jpg'),alt: 'Produto 1',linkText: ['LIVING ROOM DECOR COLLECTION','Start from $ 199.99'],cat: 'living-room/'
    },{
        img: require('../../../../assets/images/Header/MainSlider/imgSlider2-mainpage.jpg'),alt: 'Produto 2',linkText: ['KITCHEN decoration','Start from $ 50.00'],cat: 'kitchen'
    },{
        img: require('../../../../assets/images/Header/MainSlider/imgSlider3-mainpage.jpg'),alt: 'Produto 3',linkText: ['BATHROOM UTILITIES','Max price $ 200.99'],cat: 'bathroom'
    },{
        img: require('../../../../assets/images/Header/MainSlider/imgSlider4-mainpage.jpg'),alt: 'Produto 4',linkText: ['bedROOM PIECES','Start from $ 40.99'],cat: 'bedroom'
    },]


const MainSliderComponent = props => {

    let [translateValue,setTranslateValue] =  React.useState(0)
    
    const sliderRef = React.useRef()


    const translateSlider = {
        transform: `translate(${translateValue}%)`
    }


    const mainSliderHandler = arg => {
        const sliderEl = sliderRef.current

        setTranslateValue(-100)

        setTimeout(() => {
            sliderEl.appendChild(sliderEl.firstElementChild)

            sliderEl.style.transition = 'none'
            setTranslateValue(0)

            setTimeout(() => {
                sliderRef.current.style.transition = '0.8s'
            },10)
            console.log('next')
        },800)
    }


    return (
        <div className={classes.MainSlider_container}>                
            <div 
                className={classes.MainSlider_subContainer} 
                style={translateSlider}
                ref={sliderRef}
            >
            
                {mainSlides.map( (img,i) =>
                    <div key={i} className={'image-'+i}>
                        <img src={img.img}/>
                    </div>
                )}
            </div>
            <div className={classes.Change_slide_arrows}>
                <FontAwesomeIcon 
                    onClick={translateValue === 0 ? () => mainSliderHandler('next') : null} 
                    icon="arrow-right" 
                />
            </div>
        </div>
    )
}

export default MainSliderComponent