React中如何避免闭包问题，在组件卸载时用useEffect保存状态到数据库？

核心问题是闭包导致卸载时捕获的localState是组件首次渲染时的值——空依赖的useEffect只会在组件挂载时创建一次cleanup函数，它引用的始终是初始版本的localState。

下面是两种可行的解决方案：

方案一：使用useRef同步最新状态 #

通过useRef实时保存最新的localState，确保卸载时能拿到当前的状态值：

const [localState, dispatch] = useReducer(myReducer, initialState);
const latestState = useRef(localState);

// 每次state更新时同步ref
useEffect(() => {
  latestState.current = localState;
}, [localState]);

// 卸载时保存最新状态
useEffect(() => {
  return () => {
    saveToDB(latestState.current);
  };
}, []);

逻辑说明：

• 第一个useEffect会在localState每次变化时更新ref的current属性，保证ref始终指向最新状态
• 第二个空依赖的useEffect只会在组件卸载时执行cleanup函数，此时读取latestState.current就能拿到最新的状态值，不会触发额外的保存操作

方案二：防抖+卸载最终保存（可选） #

如果需要兼顾状态变更时的实时备份，同时保留卸载时的最终保存，可以结合防抖函数使用：

import { useCallback, useEffect, useReducer, useRef } from 'react';

const [localState, dispatch] = useReducer(myReducer, initialState);
const saveTimeoutRef = useRef(null);

// 防抖保存函数
const debouncedSave = useCallback((state) => {
  if (saveTimeoutRef.current) {
    clearTimeout(saveTimeoutRef.current);
  }
  saveTimeoutRef.current = setTimeout(() => {
    saveToDB(state);
  }, 1000); // 1秒防抖，可根据需求调整
}, []);

// 状态变化时触发防抖保存，卸载时执行最终保存
useEffect(() => {
  debouncedSave(localState);
  return () => {
    if (saveTimeoutRef.current) {
      clearTimeout(saveTimeoutRef.current);
    }
    saveToDB(localState);
  };
}, [localState, debouncedSave]);

这个方案适合需要实时备份状态的场景，同时保证卸载时一定会保存最终状态，避免数据丢失。

为什么之前的尝试无效？ #

• 用useCallback包裹handleUnmount并添加localState依赖：每次localState变化都会生成新的handleUnmount，但空依赖的useEffect始终引用第一次创建的handleUnmount，卸载时还是拿到旧状态；如果把handleUnmount加入useEffect依赖，每次状态变化都会触发前一次的cleanup函数，导致频繁保存，不符合需求。
• 直接存useRef但未同步更新：仅在初始化时给ref赋值，后续状态变化时ref不会自动更新，卸载时还是旧值。

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