Як зазначали інші, проблема полягає в тому, що він 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
хук, щоб ви могли СУХИТИ та спрощувати свій код, використовуючи setInterval
декларативно , як це пропонує Ден Абрамов тут, під час створення setInterval Declarative with React Hooks :
function useInterval(callback, delay) {
const intervalRef = React.useRef();
const callbackRef = React.useRef(callback);
React.useEffect(() => {
callbackRef.current = callback;
}, [callback]);
React.useEffect(() => {
if (typeof delay === 'number') {
intervalRef.current = window.setInterval(() => callbackRef.current(), delay);
return () => window.clearInterval(intervalRef.current);
}
}, [delay]);
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/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/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 .