我正在制作带有三个图像的滑块。对于此幻灯片的后退按钮,它应从最后一张图像开始并返回到1。控制台登录时,以下代码从3递减到2,但错误1,所以3 2 3 2 3 2 ...我不不明白为什么?怎么了
this.state = {
imageCount: 0,
}
previousSlide() {
this.setState({
imageCount: 3
});
if (this.state.imageCount === 3) {
this.setState((prevState) => ({
imageCount: (prevState.imageCount - 1 )
}));
}
console.log("previousSlide", this.state.imageCount)
}
答案 0 :(得分:1)
最简单的解决方案是在setState内部执行逻辑,这样您只需调用一次即可:
previousSlide() {
this.setState({imageCount} => (
{imageCount: imageCount === 0 ? 3 : imageCount - 1}
);
}
}
此代码将总是将imageCount设置为比以前少1,除非它设置为0,在这种情况下它将循环为3。
答案 1 :(得分:0)
因为您总是将状态设置为3
,然后直接将其减小为2
。您只想将3
设置为1
:
previousSlide() {
this.setState(previous => ({
imageCount: Math.max(previous.imageCount - 1, 0) || 3
}));
}