setInterval 在 ReactJS 中不能正常工作

Question

我在 ReactJS（特别是功能组件）中遇到了 setInterval 问题。我想启用自动播放滑块（这意味着 Slider Bar 中的值会在一段时间后增加）。单击按钮时将触发此功能。但是我不确切知道setInterval 和setValue 是如何工作的。控制台日志只是 returns 初始值（不会改变）（console.log 函数在 setInterval 的回调函数中被调用）。

我的代码如下：

const [value, setValue] = useState(10);
const [playable, setPlayable] = useState(false);

useEffect(() => {
    if (playable === true) {
        console.log("Trigger");
        const intervalId = setInterval(increaseValue, 1000);
        return () => clearInterval(intervalId);
    }
}, [playable]);

const increaseValue = () => {
    console.log(value);
    setValue(value + 1);
};

const autoPlay = () => {
    setPlayable(true); 
};


return (
    <div>
        <div style={{"width": "800px"}}>
            <Slider
                value={value}
                step={1}
                valueLabelDisplay="on"
                getAriaValueText={valueText}
                marks={marks}
                onChange={handleChange}
                min={0}
                max={100}
            />
        </div> 
        <button onClick={autoPlay}>Play</button>
    </div>
)

Answer 1

所以，我认为你需要将 increaseValue 函数传递给 useEffect

useEffect(() => {
    if (playable === true) {
        console.log("Trigger");
        const intervalId = setInterval(increaseValue, 1000);
        return () => clearInterval(intervalId);
    }
}, [playable, increaseValue]);

setInterval 在 ReactJS 中不能正常工作

setInterval does not work properly in ReactJS

setinterval

reactjs