reactjs - 在卸载组件之前删除 React 组件状态

Question

如果我从 useEffect 返回一个函数，我可以确定该函数将在组件卸载时运行。但是 React 似乎在调用我的卸载函数之前删除本地状态。

考虑一下:

function Component () {

  const [setting, setSetting] = useState(false)

  useEffect(() => {

    setSetting(true)

    // This should be called when unmounting component
    return () => {

      console.log('Send setting to server before component is unmounted')
      console.log(setting) // false (expecting setting to be true)
      
    }
  }, [])
  
  return (
    <p>Setting is: {setting ? 'true' : 'false'}</p>
  )
}

谁能确认预期的行为是应该删除组件状态？而且，如果这是正确的行为，那么如何在卸载组件之前将当前组件状态发送到服务器？

为了提供一些上下文，我正在对服务器的发布请求进行去抖动处理，以避免每次用户更改设置时都触发​​它。去抖动效果很好，但我需要一种方法来在用户离开页面时触发请求，因为排队的去抖动方法将不再从卸载的组件中触发。

Answer 1

并不是 React“抹掉状态值”，而是你有 closure关于设置值(挂载时的值)。

要获得预期的行为，您应该使用 ref 和另一个 useEffect 使其保持最新。

function Component() {
  const [setting, setSetting] = useState(false);

  const settingRef = useRef(setting);

  // Keep the value up to date
  // Use a ref to sync the value with component's life time
  useEffect(() => {
    settingRef.current = setting;
  }, [setting])
  

  // Execute a callback on unmount.
  // No closure on state value.
  useEffect(() => {
    const setting = settingRef.current;
    return () => {
      console.log(setting);
    };
  }, []);

  return <p>Setting is: {setting ? "true" : "false"}</p>;
}