在setInterval中使用React状态挂钩时，状态未更新

Question

我正在尝试新的React Hooks，并有一个time值的Clock组件，该组件应该每秒增加一次。但是，该值不会超过1。

function Clock() {
const [time, setTime] = React.useState(0);
React.useEffect(() => {
const timer = window.setInterval(() => {
setTime(time + 1);
}, 1000);
return () => {
window.clearInterval(timer);
};
}, []);
return (
<div>Seconds: {time}</div>
);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));

<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>

Answer 1

原因是传递到setInterval的闭包中的回调只在第一次渲染中访问time变量，而在随后的渲染中无法访问新的time值，因为useEffect()没有第二次调用。

time在setInterval回调中总是具有值0。

与您熟悉的setState一样，状态挂钩有两种形式：一种是接受更新状态的形式，另一种是传入当前状态的回调形式。您应该使用第二种形式，并在setState回调中读取最新的状态值，以确保您在递增状态值之前拥有最新状态值。

奖金：替代方法

Dan Abramov在他的博客文章中深入探讨了使用带钩子的setInterval的主题，并提供了解决这个问题的替代方法。强烈推荐阅读！

function Clock() {
const [time, setTime] = React.useState(0);
React.useEffect(() => {
const timer = window.setInterval(() => {
setTime(prevTime => prevTime + 1); // <-- Change this line!
}, 1000);
return () => {
window.clearInterval(timer);
};
}, []);
return (
<div>Seconds: {time}</div>
);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));

<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>

Answer 2

正如其他人所指出的，问题是useState只被调用一次(作为deps = [])来设置间隔：

React.useEffect(() => {
const timer = window.setInterval(() => {
setTime(time + 1);
}, 1000);
return () => window.clearInterval(timer);
}, []);

然后，每次setInterval滴答作响时，它实际上都会调用setTime(time + 1)，但time将始终保持它在定义setInterval回调(闭包)时最初的值。

您可以使用useState的setter的替代形式，并提供回调，而不是您想要设置的实际值(就像使用setState一样)：

setTime(prevTime => prevTime + 1);

但我鼓励您创建自己的useInterval挂钩，这样您就可以通过声明性地使用setInterval来DRY和简化代码，正如Dan Abramov在《使用React挂钩使setInterval声明性：》中所建议的那样

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/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来自动暂停(和清除)间隔，并返回间隔ID，以防您想手动取消它(Dan的帖子中没有涉及这一点)。

事实上，这也可以改进，这样它就不会在未使用时重新启动delay，但我想对于大多数用例来说，这已经足够好了。

如果您正在为setTimeout而不是setInterval寻找类似的答案，请查看：https://stackoverflow.com/a/59274757/3723993.

您还可以在中找到setTimeout和setInterval、useTimeout和useInterval的声明性版本，以及一些用TypeScript编写的附加挂钩https://www.npmjs.com/package/@swyg/core。

Answer 3

useEffect函数在提供空输入列表时，在组件装载时仅评估一次。

setInterval的一个替代方案是每次更新状态时用setTimeout设置新的间隔：

const [time, setTime] = React.useState(0);
React.useEffect(() => {
const timer = setTimeout(() => {
setTime(time + 1);
}, 1000);
return () => {
clearTimeout(timer);
};
}, [time]);

setTimeout对性能的影响是微不足道的，通常可以忽略不计。除非组件对新设置的超时造成不良影响的点具有时间敏感性，否则setInterval和setTimeout方法都是可以接受的。

Answer 4

useRef可以解决这个问题，这里有一个类似的组件，它在每1000ms的中增加计数器

import { useState, useEffect, useRef } from "react";
export default function App() {
const initalState = 0;
const [count, setCount] = useState(initalState);
const counterRef = useRef(initalState);
useEffect(() => {
counterRef.current = count;
})
useEffect(() => {
setInterval(() => {
setCount(counterRef.current + 1);
}, 1000);
}, []);
return (
<div className="App">
<h1>The current count is:</h1>
<h2>{count}</h2>
</div>
);
}

我认为这篇文章将帮助你使用react hooks 的间隔

Answer 5

另一种解决方案是使用useReducer，因为它总是通过当前状态。

function Clock() {
const [time, dispatch] = React.useReducer((state = 0, action) => {
if (action.type === 'add') return state + 1
return state
});
React.useEffect(() => {
const timer = window.setInterval(() => {
dispatch({ type: 'add' });
}, 1000);
return () => {
window.clearInterval(timer);
};
}, []);
return (
<div>Seconds: {time}</div>
);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));

<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>

Answer 6

const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds((seconds) => {
if (seconds === 5) {
setSeconds(0);
return clearInterval(interval);
}
return (seconds += 1);
});
}, 1000);
}, []);

注意：这将有助于使用useState钩子更新和重置计数器。秒将在5秒后停止。因为首先更改setSecond值，然后在setInterval内停止计时器并更新秒数。作为useEffect运行一次。

Answer 7

这个解决方案对我不起作用，因为我需要获取变量并做一些事情，而不仅仅是更新它。

我得到了一个变通方法，用promise 获得钩子的更新值

例如：

async function getCurrentHookValue(setHookFunction) {
return new Promise((resolve) => {
setHookFunction(prev => {
resolve(prev)
return prev;
})
})
}

有了这个，我可以在setInterval函数中获得值，就像一样

let dateFrom = await getCurrentHackValue(setSelectedDateFrom);

Answer 8

function Clock() {
const [time, setTime] = React.useState(0);
React.useEffect(() => {
const timer = window.setInterval(() => {
setTime(time => time + 1);// **set callback function here** 
}, 1000);
return () => {
window.clearInterval(timer);
};
}, []);
return (
<div>Seconds: {time}</div>
);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));

Answer 9

不知何故，类似的问题，但当使用对象和的状态值时，不会更新。

我对此有一些意见，所以我希望这能帮助到一些人。我们需要通过与新对象合并的旧对象

const [data, setData] = useState({key1: "val", key2: "val"});
useEffect(() => {
setData(...data, {key2: "new val", newKey: "another new"}); // --> Pass old object
}, []);

Answer 10

按以下步骤操作，效果良好。

const [count , setCount] = useState(0);
async function increment(count,value) {
await setCount(count => count + 1);
}
//call increment function
increment(count);

Answer 11

我从这个博客中复制了代码。所有信用都归所有者所有。https://overreacted.io/making-setinterval-declarative-with-react-hooks/

唯一的一点是，我将这个React代码改编成了React Native代码，所以如果你是一个React Native程序员，只需复制它并将其改编成你想要的。很容易适应它！

import React, {useState, useEffect, useRef} from "react";
import {Text} from 'react-native';
function Counter() {
function useInterval(callback, delay) {
const savedCallback = useRef();

// Remember the latest function.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);

// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
const [count, setCount] = useState(0);
useInterval(() => {
// Your custom logic here
setCount(count + 1);
}, 1000);
return <Text>{count}</Text>;
}
export default Counter;

Answer 12

const [loop, setLoop] = useState(0);

useEffect(() => {
setInterval(() => setLoop(Math.random()), 5000);
}, []);
useEffect(() => {
// DO SOMETHING...
}, [loop])

1. N秒后的停止间隔，以及
2. 点击按钮即可多次重置

(我无论如何都不是React专家，我的同事要求我帮忙，我写了这篇文章，认为其他人可能会觉得它有用。)

const [disabled, setDisabled] = useState(true)
const [inter, setInter] = useState(null)
const [seconds, setSeconds] = useState(0)
const startCounting = () => {
setSeconds(0)
setDisabled(true)
setInter(window.setInterval(() => {
setSeconds(seconds => seconds + 1)
}, 1000))
}
useEffect(() => {
startCounting()
}, [])
useEffect(() => {
if (seconds >= 3) {
setDisabled(false)
clearInterval(inter)
}
}, [seconds])
return (<button style = {{fontSize:'64px'}}
onClick={startCounting}
disabled = {disabled}>{seconds}</button>)
}

Answer 13

告诉React在时间变化时重新渲染。选择退出

function Clock() {
const [time, setTime] = React.useState(0);
React.useEffect(() => {
const timer = window.setInterval(() => {
setTime(time + 1);
}, 1000);
return () => {
window.clearInterval(timer);
};
}, [time]);
return (
<div>Seconds: {time}</div>
);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));

<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>