Почему useState не изменяет своё значение в setInterval?

Question

[TheSnegok]

const [stroke, setStroke] = useState(0);

	const updateStroke = () => {
		let timer = setInterval(() => {
			if (stroke > 1250) {
				setStroke(1256);
				clearInterval(timer)
			}
			console.log(stroke);
			setStroke(stroke => stroke + 250);
		}, 1000);
	};

Есть svg круг у которого strokeDashoffsetдолжно изменятся в зависимости от state, но при вызове интервала в setInterval входит одно значение и не меняется = 0, с обычным числом работает и интервал останавливается, useRef тоже не работает.

<svg
					className="loadingRing"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					onClick={() => updateStroke()}
				>
					<circle
						r="200"
						cx="210"
						cy="210"
						style={{ strokeDashoffset: stroke }}
					/>
				</svg>

Answer 1

[Alexandroppolus]

При создании таймера значение stroke было равно 0, таковое попадает в замыкание. Вызовы setStroke, конечно, меняют значение в хуке, но переменная в замыкании от этого не меняется.

Надо внести всю логику "внутрь" setStroke.

const updateStroke = () => {
    let timer = setInterval(() => {
        setStroke(stroke => {
            console.log(stroke);
            if (stroke > 1250) {
                clearInterval(timer);
                return 1256;
            } else {
                return stroke + 250;
            }
        });
    }, 1000);
};

не проверял, но навскидку должно работать.

Comments

[TheSnegok]

Спасибо, работает!!!