<分区>
我想这是因为 JS 的工作原理，但我想你不会对类有这个问题。在这段代码中:
let [open, setOpen] = React.useState(false);
let [counter, setCounter] = React.useState(0);
function handleClick() {
setOpen(true);
setInterval(() => {
console.log(counter);
setCounter(counter + 1);
}, 2000);
}
如果我调用 handleClick 一次(例如单击按钮)，控制台上记录的值始终为 0(尽管每次都更新状态)。
这可能是因为关闭。但是，如果我想在这种设置中查看 counter 的最新值怎么办？
使用类，您可以完成 this.state.counter 并且它会读取最新值。
钩子(Hook)有一些解决方法吗？
demo .
注意:我找到了this问的问题基本一样。不知何故，我在最初的搜索中没有遇到它。
最佳答案
查看下一个例子，引用setState in react docs.
export default function SimpleSnackbar() {
const classes = useStyles();
let [open, setOpen] = React.useState(false);
let [, setCounter] = React.useState(0);
// Save reference for clearing the interval
// in your case you firing an interval on every click
const lastInterval = useRef();
// Side effect on `open` change.
useEffect(() => {
if (lastInterval.current) clearInterval(lastInterval.current);
if (open) {
lastInterval.current = setInterval(() => {
// Functional setState
setCounter(prevCounterValue => {
console.log(prevCounterValue);
return prevCounterValue + 1;
});
}, 1000);
}
}, [open]);
function handleClick() {
setOpen(true);
}
function handleClose(event, reason) {
if (reason === 'clickaway') {
return;
}
setOpen(false);
}
...
}
关于javascript - 无法读取 setInterval 中的最新状态变量( Hook )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57904458/
相关文章：
javascript - 在 .then 中访问 props (React/redux)
javascript - 如何在 React 中的 GraphQL 突变组件中包含的按钮上有多个 onClick 事件
reactjs - React、TypeScript 和 RxJS 测试与 Jest 不工作
reactjs - 在执行 npm run dev 时，nextjs 的 React 给出错误
javascript - 带有 Angular JS ng-view 的 Phonegap 无法全屏显示
javascript - Mjpg paparazzo.js 不工作
javascript - 如何从由DiagramBuilder.toJSON()返回的JSON创建AlloyUIDiagramBuilder？
javascript - 如何在自定义 Hook 中测试 useEffect？