如何解决反应:无法在 setInterval 内获取状态
我有一个需要调用 setInterval 的按钮,但如果间隔已经设置,那么我不想再启动另一个 setInterval。
这就是我实现它的方式():
export default function App() {
const [intervalId,setIntervalId] = useState(null);
const startInterval = () => {
console.log("inside startInterval",intervalId);
if (!intervalId) {
console.log("starting Interval",intervalId);
const _intervalId = setInterval(() => {
console.log("Interval Id inside setInterval is",intervalId);
},2 * 1000);
setIntervalId(_intervalId);
} else {
console.log("Rejecting set interval");
}
};
const onBtnClick = () => {
console.log("btn clicked");
// make API call
startInterval();
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={onBtnClick}>Click Me</button>
</div>
);
}
但是在 setInterval 中,我总是可以看到 state 的默认值,即在我的情况下为 null。 如何访问 setInterval 中的最新值?
Click here to go to Live Code Sandbox
解决方法
您的代码正在运行。虽然 log 将 intervalId
显示为 null
,但这只是因为当 intervalId
确实是 null
.
用 const
声明的变量不能重新赋值;当点击按钮时,intervalId
在渲染期间以 null
开始,startInterval
函数在 null
上关闭。当调用 startInterval
并声明匿名回调时:
() => {
console.log("Interval Id inside setInterval is",intervalId);
}
它仍然在 null
intervalId
上方关闭。
如果您想在回调中查看间隔 ID,请改用 ref。
const intervalIdRef = useRef();
// ...
intervalIdRef.current = setInterval(() => {
console.log("Interval Id inside setInterval is",intervalIdRef.current);
},2 * 1000);
并在任何需要的地方使用 intervalIdRef.current
而不是 intervalId
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。