javascript - 刷新页面时无法获取 `beforeunload`事件中的当前状态值？

Question

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = useState(0)

  useEffect(() => {
    const intervalID = setInterval(() => {
      setCounter(prevCounter => prevCounter + 1)
    }, 1000)
    return () => clearInterval(intervalID)
  }, [])

  useEffect(() => {
    window.addEventListener('beforeunload', handleUnload)
    return () => window.removeEventListener('beforeunload', handleUnload)
  }, [])

  const handleUnload = () => {
    console.log('INSIDE handleUnload: ', counter)
    // code to save progress to local storage....
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox {counter}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

刷新页面时，会调用handleUnload事件并始终打印INSIDE handleUnload: 0，尽管计数器值不为0。

sandbox

Answer 1

所以这是由于关闭造成的。当您绑定(bind)处理程序时，它会关闭当前的初始状态，因此在组件的生命周期内，处理程序内部的 count 值将始终为 0。

有两种方法可以做到这一点。

您可以添加引用并跟踪其中的当前计数器值，以便您始终可以获得最新的状态值，例如

const counterRef = useRef()
counterRef.current = counter

// ...
const handleUnload = () => {
  // will be initial
  console.log('INSIDE handleUnload: ', counter)
  // will be current
  console.log('INSIDE handleUnload: ', counterRef.current)
}

或者，最简单的方法是，您可以通过更新效果以再次运行来重新附加状态更改的事件监听器，如下所示:

useEffect(() => {
  window.addEventListener('beforeunload', handleUnload)
  return () => window.removeEventListener('beforeunload', handleUnload)
}, [counter])