Как указывали другие, проблема в том, что useState вызывается только один раз (как deps = []) для установки интервала:
React.useEffect(() => {
const timer = window.setInterval(() => {
setTime(time + 1);
}, 1000);
return () => window.clearInterval(timer);
}, []);
Затем каждый раз, когда setInterval тикает, он фактически вызывает setTime(time + 1), но time всегда будет хранить значение, которое оно имело изначально, когда был определен обратный вызов setInterval (закрытие).
Вы можете использовать альтернативную форму установщика useState и предоставить обратный вызов, а не фактическое значение, которое вы хотите установить (как и в случае с setState):
setTime(prevTime => prevTime + 1);
Но я бы посоветовал вам создать свой собственный useInterval хук, чтобы вы могли DRY и упростить свой код, используя setInterval декларативно, как предлагает Дэн Абрамов здесь, в Создание декларативного setInterval с помощью React Hooks :
function useInterval(callback, delay) {
const intervalRef = React.useRef();
const callbackRef = React.useRef(callback);
// Remember the latest callback:
//
// Without this, if you change the callback, when setInterval ticks again, it
// will still call your old callback.
//
// If you add `callback` to useEffect's deps, it will work fine but the
// interval will be reset.
React.useEffect(() => {
callbackRef.current = callback;
}, [callback]);
// Set up the interval:
React.useEffect(() => {
if (typeof delay === 'number') {
intervalRef.current = window.setInterval(() => callbackRef.current(), delay);
// Clear interval if the components is unmounted or the delay changes:
return () => window.clearInterval(intervalRef.current);
}
}, [delay]);
// Returns a ref to the interval ID in case you want to clear it manually:
return intervalRef;
}
const Clock = () => {
const [time, setTime] = React.useState(0);
const [isPaused, setPaused] = React.useState(false);
const intervalRef = useInterval(() => {
if (time < 10) {
setTime(time + 1);
} else {
window.clearInterval(intervalRef.current);
}
}, isPaused ? null : 1000);
return (<React.Fragment>
<button onClick={ () => setPaused(prevIsPaused => !prevIsPaused) } disabled={ time === 10 }>
{ isPaused ? 'RESUME ⏳' : 'PAUSE ????' }
</button>
<p>{ time.toString().padStart(2, '0') }/10 sec.</p>
<p>setInterval { time === 10 ? 'stopped.' : 'running...' }</p>
</React.Fragment>);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));
body,
button {
font-family: monospace;
}
body, p {
margin: 0;
}
p + p {
margin-top: 8px;
}
#app {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
button {
margin: 32px 0;
padding: 8px;
border: 2px solid black;
background: transparent;
cursor: pointer;
border-radius: 2px;
}
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>
Помимо создания более простого и понятного кода, это позволяет вам автоматически приостанавливать (и очищать) интервал, просто передавая delay = null, а также возвращает идентификатор интервала, если вы хотите отменить его вручную (это не рассматривается в сообщениях Дэна).
На самом деле, это также можно улучшить, чтобы он не перезапускал delay при снятии паузы, но я думаю, для большинства случаев использования этого достаточно.
Если вы ищете аналогичный ответ для setTimeout, а не для setInterval, проверьте это: https://stackoverflow.com/a/59274757/3723993.
Вы также можете найти декларативную версию setTimeout и setInterval, useTimeout и useInterval, а также пользовательский хук useThrottledCallback, написанный на TypeScript, в https://gist.github.com/Danziger/336e75b6675223ad805a88c2dfdcfd4a.
person
Danziger
schedule
10.12.2019
