setInterval 在 ReactJS 中无法正常工作

Question

我遇到了 ReactJS 中的 setInterval 问题（尤其是功能组件）。我想启用自动播放滑块（这意味着滑块栏中的值将在一段时间后增加）。当我单击一个按钮时，将触发此功能。但我不知道 setInterval 如何与 setValue 一起工作。控制台日志只返回初始值（不改变）（在setInterval的回调函数中调用了console.log函数）。

我的代码如下：

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]);