setInterval не работает должным образом в ReactJS - PullRequest
Новая
       17

setInterval не работает должным образом в ReactJS

0 голосов
/ 27 апреля 2020

У меня проблема с setInterval в ReactJS (особенно с функциональным компонентом). Я хочу включить слайдер автозапуска (это означает, что значение в ползунке будет увеличиваться через некоторое время). Эта функция будет срабатывать при нажатии кнопки. Но я не знаю точно, как setInterval работает с setValue. Журнал консоли просто возвращает начальное значение (не изменяется) (функция 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>
)

1 Ответ

0 голосов
/ 27 апреля 2020

Итак, я думаю, вам нужно передать функцию increaseValue в действиеЭффект 

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