react写一个简单的slide效果求助

Question

我写这个轮播的思路是通过改变left值来达到滚动的效果，
但现在遇到一个问题，该怎么去判断轮播已经滑倒底了？
（我的想法是通过index来计数，但是发现index会总是和点击的次数值不一致？慢两拍）
轮播的结构大该是这样的：

constructor(props) {
        super(props);
        this.state = {
           
            leftV: 0,
            index: 0
        }
    }
    right() {
        const left = document.getElementById("slideContainer").offsetLeft;
        
        this.setState((prevState) => ({
            leftV: left - 270,
            index: prevState.index+1
        }));
       
    }
    left() {
        const right = document.getElementById("slideContainer").offsetLeft;
        
        this.setState((prevState) => ({
            leftV: right + 270,
            index: prevState.index-1
        }));
        
    }

<div className="slideWrap">
    <div className="leftArrow" onClick={this.left}></div>
    <div className="rightArrow" onClick={this.right}></div>
    <ul style={{left:this.state.leftV}}>
        {
           this.state.arr.map((item,index) => {
                return (
                    <li>//内容</li>
                );
           })
        }
    </ul>
</div>

Answer 1

this.state.arr.length === this.state.index + 1

Answer 2

setState 更新dom是异步的

const checkAndDoSomething = function () {
    // code
}
this.setState().then(checkAndDoSomething)