CSS 旋转图像库，在应该单击一次按钮时做出反应，单击两次按钮

Question

我有一个使用 React 和 CSS 的旋转图片库。它可以工作，只是每次我单击按钮向前或向后旋转时，都需要单击两次才能开始正常工作。例如，第一次单击不执行任何操作，第二次单击继续，或者如果向右滚动然后单击左侧按钮，它会再次向右滚动，然后后续单击开始向左滚动。

我知道这可能是因为状态已更新，但尚未重新渲染，但无论我尝试什么，它都不会改变任何内容。我尝试将集合转换移动到一个单独的函数中。我尝试将其设置为一个变量，然后函数将其设置为等于 currentTransform 的状态。我似乎无法让它停止需要两次点击。任何帮助将不胜感激。

反应代码

const Rotating = () => {

const [currentTransform, setCurrentTransform] = useState(`perspective(1000px) rotateY(0deg)`);
const [imageGroup, setImageGroup] = useState("imageSet1");
const [x, setX] = useState(0);
const numberOfPictures = 8;

const handlePreviousButton = () => {
    setX(x + 45);
    setCurrentTransform(`perspective(1000px) rotateY(${x}deg)`);
}

const handleNextButton = () => {
    setX(x - 45);
    setCurrentTransform(`perspective(1000px) rotateY(${x}deg)`);
}

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: currentTransform} 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);
}

Answer 1

在react中setState是异步的，所以当你调用setX(newVal)时，你的x还没有更新。试试这个

const handlePreviousButton = () => {
    const newXValue = x + 45
    setX(newXValue);
    setCurrentTransform(`perspective(1000px) rotateY(${newXValue}deg)`);
}