Reactjs 在卸载组件之前对已擦除的组件状态进行反应

如果我从

useffect

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

考虑这一点：

功能组件（）{
常量[设置，设置]=useState（false）
useffect（（）=>{
设置（真）
//在卸载组件时应调用此函数
return（）=>{
console.log（'在卸载组件之前将设置发送到服务器'）
console.log（设置）//false（预期设置为true）
}
}, [])
返回(
设置为：{设置？'true'：'false'}

)
}

是否有人可以确认预期的行为是应清除组件状态？而且，如果这是正确的行为，那么在卸载组件之前，如何向服务器触发当前组件状态

为了提供一些上下文信息，我将post请求去公告到服务器，以避免每次用户更改设置时都触发它。去Bouncing工作得很好，但我需要一种在用户导航离开页面时触发请求的方法，因为排队的去Bouncing方法将不再从卸载的组件触发。

不是React“擦除状态值”，而是您在

上设置了值（挂载时的值）

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

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

函数组件（）{
const[设置，设置]=使用状态（false）；
const settingRef=useRef（设置）；
//使值保持最新
//使用ref将值与组件的使用寿命同步
useffect（（）=>{
设置参考电流=设置；
}，[设置]）
//卸载时执行回调。
//状态值上没有闭包。
useffect（（）=>{
常数设置=设置参考电流；
return（）=>{
控制台日志（设置）；
};
}, []);
返回设置为：{Setting？“true”：“false”}
；
}
“在卸下React组件之前，值显然已重置”-这不是真的。你有一个可复制的例子吗？这里有一个代码供您使用：您是对的，
useffect
显然只运行了一次，而没有运行对
设置的更改，因此实际上是一个结束。遗憾的是，使用ref的解决方案如此不优雅。谢谢你的贡献。我不知道优雅的解决方案意味着什么，但在React中，这就是你如何使它工作的。如果您所说的优雅是指短代码，那么只需将其放在一个定制的钩子中即可。工作代码中肯定有优雅的一面。所以，谢谢你。：-）