关于antd-mobile的使用问题

Question

我想轮播三组图片，每组四张，点击下一步之后从第一张开始，
但是问题来了，头一组图片播放到第三张时，我点击下一步，他会自动播放第二组图片的第四张，不是从第一张开始的，这个怎么解决？
附上代码

import React, { useState, useEffect } from 'react';
import { setTitle } from '../../utils/util';
import { Carousel } from 'antd-mobile';
import { launch, ourSign, otherSign } from '../../utils/constants';
import finish from '../../images/noviceGuide/finish.png';

import './index.less';

const NoviceGuide = ({ history }) => {

  const [ imgs, setImgs ] = useState(launch);

  let [ step, setStep ] = useState(1);

  const [ interval, setAutoplayInterval ] = useState(100);

  useEffect(() => {
    setTitle('新手引导');
    setAutoplayInterval(3000);
  },[])

  const showImgs = (step) => {
    if (step === 1) {
      setImgs(launch)
    } else if (step === 2) {
      setImgs(ourSign)
    } else {
      setImgs(otherSign)
    }
  }

  // 下一步
  const next = () => {
    setStep(++step)
    showImgs(step);
  }

  // 上一步
  const prev = () => {
    setStep(--step)
    showImgs(step);
  }

  // 返回首页
  const goHome = () => {
    history.replace('/home')
  }

  // 步骤条
  const renderSteps = () => {
    if (step === 1) {
      return  <div className="novice-guide-steps">
        <p className="novice-guide-steps-first">1</p>
        <p className="novice-guide-steps-text">发起签署</p>
        <p className="novice-guide-steps-second">2</p>
        <p className="novice-guide-steps-third">3</p>
      </div>
    } else if (step === 2) {
      return  <div className="novice-guide-steps">
        <p className="novice-guide-steps-first-finish"><img src={finish} alt="finish" /></p>
        <p className="novice-guide-steps-second-now">2</p>
        <p className="novice-guide-steps-second-text">对方签署</p>
        <p className="novice-guide-steps-third">3</p>
      </div>
    } else {
      return  <div className="novice-guide-steps">
        <p className="novice-guide-steps-first-end"><img src={finish} alt="finish" /></p>
        <p className="novice-guide-steps-second-finish"><img src={finish} alt="finish" /></p>
        <p className="novice-guide-steps-third-now">3</p>
        <p className="novice-guide-steps-third-text">我方签署</p>
      </div>
    }
  }

  // 底部按钮
  const renderBtn = () => {
    if (step === 1) {
      return <div className="novice-guide-btn">
        <p className="novice-guide-btn-next-first" onClick={next}>下一步</p>
      </div>
    } else if (step === 2) {
      return <div className="novice-guide-btn">
        <p className="novice-guide-btn-prev" onClick={prev}>上一步</p>
        <p className="novice-guide-btn-next" onClick={next}>下一步</p>
      </div>
    } else {
      return <div className="novice-guide-btn">
        <p className="novice-guide-btn-prev" onClick={prev}>上一步</p>
        <p className="novice-guide-btn-next" onClick={goHome}>我学会了</p>
      </div>
    }
  }
  
  return (
    <div className="novice-guide-wrap">
      <div className="novice-guide">
        {renderSteps()}
        <div className="novice-guide-carousel">
          <Carousel autoplay infinite dotActiveStyle={{ backgroundColor: '#4EA3ED' }} autoplayInterval={interval}>
            {imgs.map((item, index) => (
              <img key={index} src={item} alt=''/>
            ))}
          </Carousel>
        </div>
        {step === 3 && <p className="novice-guide-point">可以从帮助中心再次查看</p>}
      </div>
      {renderBtn()}
    </div>
  )
}

export default NoviceGuide;

launch,ourSign,otherSign就是每组图片，格式为[img1, img2, img3]
我希望当我点击下一步时，轮播图能变成第二组图片的第一张，而不是按照slide显示

Answer 1

不这么写了，我感觉很有可能是共享state的问题，我直接换了暴力的写法，直接写了三个carousel!!