React组件中函数无法获取最新参数问题排查

问题场景 #

为React应用实现了单例类作为外部状态管理方案，但出现异常：组件内的useEffect能正确输出最新的searchTerm，但自定义的updateSearchTerm函数始终返回空字符串。

相关代码实现 #

单例状态类与自定义Hook

export class ProductSearchStore {
    private static instance: ProductSearchStore;
    searchTerm: string = "";
    subscribers: Set<() => void> = new Set();

    private constructor() {}

    public static getInstance(): ProductSearchStore {
        if (!ProductSearchStore.instance) {
            ProductSearchStore.instance = new ProductSearchStore();
        }
        return ProductSearchStore.instance;
    }

    public subscribe = (cb: () => void): (() => void) => {
        this.subscribers.add(cb);
        return () => {
            this.subscribers.delete(cb);
        };
    };

    public set = (value: Partial<ProductSearchStore>): void => {
        this.searchTerm = value.searchTerm ?? this.searchTerm;
        this.subscribers.forEach((cb) => cb());
    };

    public get = (): string => {
        return this.searchTerm;
    };
}

export function useProductSearchStore(): [string, (term: string) => void] {
    const productSearchStore = useRef<ProductSearchStore>(ProductSearchStore.getInstance());
    const [searchTerm, setSearchTerm] = useState<string>("");

    function updateSearchTerm(): void {
        productSearchStore.current.set({ searchTerm: term });
    }

    useEffect(() => {
        const unsubscribe = productSearchStore.current.subscribe(() => {
            setSearchTerm(productSearchStore.current!.get());
        });

        return () => {
            unsubscribe();
        };
    }, []);

    return [searchTerm, updateSearchTerm];
}

组件中的使用

const [searchTerm, setSearchTerm] = useProductSearchStore();

function updateSearchTerm(term: string) {
    console.log("searchTerm", searchTerm);
}

useEffect(() => {
    console.log("searchTerm", searchTerm);

}, [searchTerm]);

问题原因 #

1. 闭包陷阱：组件内的updateSearchTerm函数在初始渲染时创建，捕获了当时的searchTerm空字符串值，后续组件重新渲染时该函数未重新创建，始终使用初始闭包中的旧值。
2. 自定义Hook的参数缺失：useProductSearchStore中的updateSearchTerm函数未定义参数term，调用时会触发错误。

修复方案 #

步骤1：修正自定义Hook中的updateSearchTerm #

为函数添加参数，并使用useCallback缓存函数，避免组件重渲染时重复创建：

export function useProductSearchStore(): [string, (term: string) => void] {
    const productSearchStore = useRef<ProductSearchStore>(ProductSearchStore.getInstance());
    const [searchTerm, setSearchTerm] = useState<string>("");

    // 添加参数term，并用useCallback缓存函数
    const updateSearchTerm = useCallback((term: string) => {
        productSearchStore.current.set({ searchTerm: term });
    }, []);

    useEffect(() => {
        const unsubscribe = productSearchStore.current.subscribe(() => {
            setSearchTerm(productSearchStore.current!.get());
        });

        return () => {
            unsubscribe();
        };
    }, []);

    return [searchTerm, updateSearchTerm];
}

步骤2：解决组件内函数的闭包问题 #

有两种可选方式：

方式一：用useCallback包裹组件内函数，添加依赖

确保函数在searchTerm更新时重新创建，获取最新值：

const [searchTerm, setSearchTerm] = useProductSearchStore();

// 用useCallback包裹，依赖searchTerm确保捕获最新值
const updateSearchTerm = useCallback((term: string) => {
    console.log("searchTerm", searchTerm);
    setSearchTerm(term);
}, [searchTerm, setSearchTerm]);

useEffect(() => {
    console.log("searchTerm", searchTerm);
}, [searchTerm]);

方式二：直接从单例store获取最新值

绕过闭包，直接访问store中的实时值：

const [searchTerm, setSearchTerm] = useProductSearchStore();
const productSearchStore = useRef(ProductSearchStore.getInstance());

function updateSearchTerm(term: string) {
    // 直接从单例store获取最新的searchTerm
    console.log("searchTerm", productSearchStore.current.get());
    setSearchTerm(term);
}

useEffect(() => {
    console.log("searchTerm", searchTerm);
}, [searchTerm]);

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