React自定义Hook返回函数无法获取父作用域变量更新值的问题

问题根源 #

你遇到的是闭包陷阱：useUniqNameValidator返回的验证函数在初始渲染时捕获了nameList的引用，后续nameList更新时，旧的函数依然持有旧值的引用，导致验证逻辑失效。

解决方案一：用useCallback绑定依赖（推荐） #

通过useCallback包裹验证函数，并将nameList作为依赖项，确保每次nameList更新时都会生成新的验证函数，从而获取最新值。同时修正原逻辑的错误（原判断逻辑颠倒）：

//utils.js
import { useSelector, useCallback } from 'react-redux';

export function useUniqNameValidator() {
    const nameList = useSelector(accountDetailsSelector);
    
    return useCallback((value) => {
        // 修正逻辑：返回true表示名称已存在
        return !nameList.every((item) => value !== item.name);
    }, [nameList]); // 依赖nameList，状态更新时重新生成函数
}

主组件无需修改，子组件接收到的uniqValidator会随nameList更新而刷新，调用时自然能拿到最新的列表。

解决方案二：用useRef保存最新状态 #

如果不想频繁创建验证函数，可以用useRef实时同步nameList的最新值，让验证函数始终读取最新的引用：

//utils.js
import { useSelector, useRef, useEffect, useCallback } from 'react-redux';

export function useUniqNameValidator() {
    const nameList = useSelector(accountDetailsSelector);
    const nameListRef = useRef(nameList);

    // 每次nameList更新时同步到ref
    useEffect(() => {
        nameListRef.current = nameList;
    }, [nameList]);

    return useCallback((value) => {
        // 读取ref中的最新值
        return !nameListRef.current.every((item) => value !== item.name);
    }, []); // 依赖为空，函数不会频繁重建
}

额外提示：修正原逻辑错误 #

你原代码中验证函数的返回值和handleAdd里的判断逻辑是颠倒的：

• 原函数nameList.every(...)返回true表示名称不存在
• 但你在handleAdd里用if(uniqValidator(name))判断为“已存在”，这会导致逻辑完全相反
• 上面的解决方案中已经通过!修正了这个问题，确保验证函数返回true时表示名称重复

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