无法读取setInterval（挂钩）中的最新状态变量

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);
  }

  ...
}