React组件卸载时获取最新state并保存的解决方案求助

这绝对是React Hooks里典型的闭包陷阱问题，我来帮你梳理清楚问题根源，再给你两种可靠的解决方案：

为什么你的两种写法都不行？ #

1. 空依赖数组的useEffect：受React闭包特性影响，这个effect里的jobData会一直锁定为组件初始化时的undefined，后续状态更新根本不会修改这个闭包里的值，自然拿不到最新数据。
2. 依赖jobData的useEffect：每次jobData变化都会触发effect回调，导致你每修改一个字段就执行一次保存（完全不符合“仅卸载时保存”的需求）；而且在部分批量更新场景下，还可能出现状态不同步、拿不到最终值的问题。

方案一：用useRef跟踪最新状态（最直观可靠） #

useRef的current属性是可变的，不受闭包限制，我们可以每次jobData更新时同步更新ref，这样卸载时就能直接从ref里获取最新值：

import React from 'react';

// 定义你的job数据结构
interface IjobData {
  // 示例属性，根据实际需求修改
  title: string;
  salary: number;
}

const YourComponent = (props: { Job: IjobData }) => {
  // 初始化时直接用props.Job作为初始状态，确保是props的副本
  const [jobData, setJobData] = React.useState<IjobData>(props.Job);
  // 创建ref跟踪最新的jobData
  const latestJobDataRef = React.useRef<IjobData>(jobData);

  // 每次jobData更新，同步更新ref
  React.useEffect(() => {
    latestJobDataRef.current = jobData;
  }, [jobData]);

  const handleJobChange = (name: keyof IjobData, value: any) => {
    // 用函数式更新确保基于最新状态修改
    setJobData(prev => ({ ...prev, [name]: value }));
  };

  // 组件卸载时执行保存逻辑
  React.useEffect(() => {
    return () => {
      const finalJobData = latestJobDataRef.current;
      if (finalJobData) {
        // 这里执行你的保存操作，比如调用API、存入localStorage等
        // saveJobToStorage(finalJobData);
        console.log('卸载时保存的最新数据：', finalJobData);
      }
    };
  }, []); // 空依赖，仅在组件卸载时执行清理函数

  // 组件渲染逻辑
  return <div>...</div>;
};

方案二：直接在状态更新时同步维护ref（更精简） #

如果你不想额外写一个useEffect同步ref，也可以在handleJobChange里直接更新ref，省去同步的effect：

const handleJobChange = (name: keyof IjobData, value: any) => {
  const newJobData = { ...jobData, [name]: value };
  setJobData(newJobData);
  // 直接更新ref
  latestJobDataRef.current = newJobData;
};

这种写法更精简，效果和方案一完全一致，适合追求代码紧凑的场景。

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