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“清除了状态值”，而是你已经关闭了setting值（挂载时的值）。

为了获得预期的行为，您应该使用 aref和 anotheruseEffect来使其保持最新。

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