React Native中datetimepicker更新状态后useCallback内取值为null怎么办

根本原因 #

问题出在useCallback Hook 的依赖数组配置错误。
useCallback 的作用是缓存函数实例，只有当依赖数组内的变量发生变更时，才会生成新的函数实例。你当前定义的openImageUpload仅将uploadHandler加入依赖数组，因此函数实例在组件初始化后就被固定，捕获的是初始化时的changedDate值（即null）。后续changedDate状态更新不会触发useCallback刷新函数实例，所以函数内部永远读取到的是初始闭包中的旧值。

修复方案 #

有两种常用修复方式：

方案1：补全useCallback依赖 #

将changedDate加入useCallback的依赖数组，每次changedDate更新时自动生成新的函数实例，即可读取到最新状态值：

const openImageUpload = useCallback(
    (mode: 'picker' | 'camera' = 'picker') => {
        console.log('date on function: ', changedDate); 
        // 其他业务逻辑
    },
    [uploadHandler, changedDate], // 新增changedDate作为依赖
);

方案2：用useRef同步状态值（适合不想频繁刷新useCallback的场景） #

如果希望避免changedDate更新导致openImageUpload频繁刷新，可以用Ref存储changedDate的最新值，useCallback内直接读取Ref即可，无需将changedDate加入依赖：

const [changedDate, setChangedDate] = useState<string | null>(null);
// 新增ref同步状态
const changedDateRef = useRef<string | null>(null);

// 状态更新时同步到ref
useEffect(() => {
  changedDateRef.current = changedDate;
}, [changedDate]);

const openImageUpload = useCallback(
    (mode: 'picker' | 'camera' = 'picker') => {
        console.log('date on function: ', changedDateRef.current); // 读取ref的最新值
        // 其他业务逻辑
    },
    [uploadHandler],
);

提示：日常开发建议开启ESLint规则react-hooks/exhaustive-deps，可以自动检测这类依赖遗漏问题，避免同类错误。

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