分页显示的切换效果，加数组按给定数字分割

先安利数组切割，我是切割成每7个合成一个数组：

    const [showstk,setshow] = useState([])//这是用来存放固定数量的展示数组
    let [arrow,setarrow] = useState(-1)//这是数组索引，如果数组被分割成多个，你要控制展示第几组数据就通过这个索引
    const [stake, setStake] = useState([
        {
            img: './img/stake/1.png'
        },
        {
            img: './img/stake/1.png'
        },
        {
            img: './img/stake/1.png'
        },
        {
            img: './img/stake/1.png'
        },
        {
            img: './img/stake/1.png'
        },
        {
            img: './img/stake/1.png'
        }
    ])//这是所以内容存放的最大数组，我们将按一定数量分割这个数组

    useEffect(() => {//stake一旦发生变化就会重新计算
        if (stake != undefined) {
            if (stake.length <= 4) {//小于4则证明不够分割成两组，就可以直接给到showstk这个展示数组
                setarrow(-1)
                setshow(stake)
            } else if (arrow >= 0) {
                let a = arrToTwoDim(stake, 4)
                setshow(a[arrow])
            } else {
                setarrow(0)
            }
        } else {
            return
        }
    }, [stake])

    useEffect(() => {//当arrow索引变化开始++或者--，说明用户切换了下一组数据或者上一组，setshow(a[arrow])就可以进行翻页切换
        let a = arrToTwoDim(stake, 4)
        if (arrow < 0) {
            return;
        } else {
            setshow(a[arrow])
        }
    }, [arrow])

    function arrToTwoDim(arr, n = 4) {
        var arr2 = []
        for (var i = 0, j = 0; i < arr.length; i += n) {
            arr2[j] = []
            for (var k = 0; k < n; k++) {
                if (i + k < arr.length)
                    arr2[j].push(arr[i + k])
            }
            j++
        }
        return arr2
    }//分割数组的工具函数
    const leftI = () => {
        if (arrow == 0) {
            return
        } else {
            setarrow(--arrow)
        }
    }
    const rightI = () => {
        let a = arrToTwoDim(stake, 4)
        if (arrow > a.length - 2) {
            return
        } else {
            setarrow(++arrow)
        }
    }