无法读取 setInterval（Hooks）中的最新状态变量 [重复]

Question

我想这是因为 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 并且它会读取最新值。 钩子有一些解决方法吗？ demo.

---

注意：我发现this 的问题基本相同。不知怎的，我在最初的搜索中没有遇到它。

Answer 1

查看下一个例子，参考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);
  }

  ...
}