React+CSS旋转图片画廊需两次点击生效问题求助

问题现象 #

用React和CSS实现的旋转图片画廊，点击「Previous/Next」旋转按钮时存在响应异常：

• 首次点击按钮无反应，第二次点击才会触发旋转
• 切换旋转方向时（比如原本向右旋转，点击向左按钮），会先执行一次原方向旋转，后续点击才会切换到目标方向

问题根源 #

代码里存在两个核心问题：

1. React状态更新的异步性：setX是异步操作，调用setX(x + 45)后立刻用当前x值更新currentTransform，此时x还未完成更新，导致currentTransform使用旧值，第一次点击后DOM无变化，第二次点击时x才是更新后的值，才会生效。
2. 冗余状态导致同步问题：currentTransform完全可以通过x状态推导出来，没必要单独维护这个状态，冗余状态极易造成状态不同步。

解决方案 #

直接删除currentTransform状态，在渲染时通过x实时计算transform样式，彻底避免状态同步问题。

修改后的React代码 #

const Rotating = () => {
  const [imageGroup, setImageGroup] = useState("imageSet1");
  const [x, setX] = useState(0);
  const numberOfPictures = 8;

  const handlePreviousButton = () => {
    setX(x + 45);
  };

  const handleNextButton = () => {
    setX(x - 45);
  };

  const changeImageSet = (imageSet: string) => {
    setImageGroup(imageSet);
  };

  return (
    <div className="rotating-gallery-main-div-style">
      <div className="rotating-gallery-btn-container">
        <Button onClick={() => changeImageSet("imageSet1")} className="image-group-btn" variant="primary">
          Pictures
        </Button>
        <Button onClick={() => changeImageSet("imageSet2")} className="image-group-btn" variant="primary">
          Other Pictures
        </Button>
      </div>
      <div 
        className="rotating-gallery-image-container" 
        style={{ transform: `perspective(1000px) rotateY(${x}deg)` } as React.CSSProperties}
      >
        {[...Array(numberOfPictures)].map((_, index) => (
          <span style={{ "--i": index } as React.CSSProperties} key={index}>
            <img src={`/images/${imageGroup}/${index}.jpg`} />
          </span>
        ))}
      </div>
      <div className="rotating-gallery-btn-container">
        <Button onClick={handlePreviousButton} className="rotating-gallery-prev-btn rotating-gallery-btn" variant="primary">Previous</Button>
        <Button onClick={handleNextButton} className="rotating-gallery-next-btn rotating-gallery-btn" variant="primary">Next</Button>
      </div>
    </div>
  );
};

CSS代码（保持不变） #

.rotating-gallery-main-div-style {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
  background: black;
  overflow: hidden;
}
.rotating-gallery-image-container {
  position: relative;
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: transform 0.7s;
}
.rotating-gallery-image-container span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
}
.rotating-gallery-image-container span img {
  position: absolute;
  left: 0;
  top: -30px;
  width: 100%;
  max-height: 225px;
}
.rotating-gallery-btn-container {
  position: relative;
  width: 80%;
}
.rotating-gallery-btn {
  position: absolute;
  bottom: -80px;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}
.image-group-btn {
  position: relative;
  top: -180px;
  margin-left: 10px;
}
.rotating-gallery-prev-btn {
  left: 20%;
}
.rotating-gallery-next-btn {
  right: 20%;
}
.rotating-gallery-btn:hover {
  filter: brightness(1.5);
}

内容的提问来源于stack exchange，提问作者sephiroth