React组件卸载时如何获取最新状态并执行数据库更新？

要实现组件卸载时仅在value与self不同时更新数据库，核心是在组件卸载的清理函数中获取到value的最新状态，以下是修正后的实现思路和代码：

问题根源 #

• 空依赖的useEffect清理函数会捕获初始渲染时的value闭包，始终拿不到更新后的状态。
• 你之前的useRef赋值时机错误：onChange中赋值的value是更新前的旧值（setValue是异步操作），导致ref无法同步最新状态。

正确实现 #

用useRef实时同步value的最新值，再在卸载清理函数中对比判断：

const { routine, self } = route.params;
const [value, setValue] = useState(self);
// 用ref存储最新的value值
const valueRef = useRef(value);

// 每次value变化时，同步更新ref的current值
useEffect(() => {
  valueRef.current = value;
}, [value]);

// 组件卸载时的清理逻辑
useEffect(() => {
  return () => {
    // 对比最新的value和初始的self
    if (valueRef.current !== self) {
      // 这里执行更新数据库的操作
      console.log("执行数据库更新", valueRef.current, self);
    }
  };
}, [self]); // 依赖self，防止self变化时出现旧值

const onChange = () => {
  setValue(prev => !prev);
};

return (
  <View style={styles.container}>
    <TouchableOpacity onPress={onChange}>
      <View style={{marginLeft: 150, width: 50, height: 50, backgroundColor: value ? 'red' : 'blue'}}></View>
    </TouchableOpacity>
  </View>
);

代码说明 #

1. valueRef同步最新状态：通过监听value变化的useEffect，每次value更新时立刻把最新值存入ref，确保ref.current始终是当前最新的状态。
2. 卸载清理逻辑：依赖self的useEffect返回函数会在组件卸载时执行，此时通过valueRef.current拿到最新的value，和self对比后执行数据库更新。

这样就能保证只在组件卸载时检查状态差异，且能获取到最新的value值，完全符合需求。

内容的提问来源于stack exchange，提问作者Sketch