setInterval 中的 React setState 没有立即更新

Question

我正在开发一个幻灯片组件，我想更新它的自动播放间隔。但是，该值不会立即更新。每当我点击加速或减速时，状态都是使用上次的值，而不是更新的值，即使我使用了setState()。

var id;
const data = [img1, img2, img3, img4];

class Slideshow extends React.Component {
    constructor(props) {
        super(props);
        this.state = { ImgId: 0, interval: 2000 };
    }
    startSlideshow() {
        this.pause(); // prevent start multiple setInterval()
        id = setInterval(() => {
            this.setState(state => ({...state, ImgId: (state.ImgId + 1) % data.length}))
        }, this.state.interval);
        console.log(this.state.interval);
    }
    pause() {
        if (id) {
            clearInterval(id);
        }
    }
    slowDown() {
        this.setState((state) => ({...state, interval: state.interval + 250}));
        this.startSlideshow();
    }
    speedUp() {
        this.setState((state) => ({...state, interval: state.interval === 250 ? 250 : state.interval - 250}));
        this.startSlideshow();
    }
    render() {
        return (
            <>
                <button  onClick={() => this.startSlideshow()}>Start</button>
                <button  onClick={() => this.pause()}>Pause</button>
                <button  onClick={() => this.slowDown()}>Slow down</button>
                <button  onClick={() => this.speedUp()}>Speed up</button>
                <img src={"images/"+data[this.state.ImgId].filename} className="w-100"/>
                <h6 className="text-center">{data[this.state.ImgId].filename}</h6>
            </>
        );
    }
}

Answer 1

像这样使用：

slowDown() {
    this.setState((state) => ({...state, interval: state.interval + 250}), ()=>{
        this.startSlideshow();
    );
    
}
speedUp() {
    this.setState((state) => ({...state, interval: state.interval === 250 ? 250 : state.interval - 250}), ()=>{
      this.startSlideshow();
    );
    
}

setState have a callback, trigger after setting complete

setInterval 中的 React setState 没有立即更新

React setState in setInterval not updated immediately

javascript

slideshow

setstate

reactjs