React中向Context API传递函数后出现undefined问题求解

问题场景 #

我实现了一套认证流程：用户点击未登录状态下的操作按钮（比如点赞）时，会打开Radix UI的AuthDialog弹窗；用户完成认证后，需要自动关闭弹窗并执行按钮绑定的自定义回调（比如完成点赞操作）。

但遇到核心问题：在AuthModalContext中通过setSuccessCallBack设置函数类型的回调时，弹窗关闭后successCallBack会变成undefined；但如果设置字符串类型的值，却能正常保留。需要实现通用的回调机制，支持不同按钮绑定不同的认证后操作。

问题原因 #

出现这个问题的核心原因是函数作为引用类型，在React组件重渲染或Context状态更新时，容易因为引用变化导致状态丢失：

• 直接用useState存储函数时，若组件（比如Layout或AuthDialog）重渲染，且没有用useCallback等方式稳定函数引用，新的函数引用会覆盖原有状态，甚至在某些场景下被重置为初始值；
• 弹窗关闭时的组件卸载/状态重置逻辑，可能误将函数类型的状态清空，而字符串作为值类型不受影响。

解决方案 #

推荐使用useRef来存储回调函数，因为useRef的.current属性不会在组件重渲染时被重置，能稳定保存函数引用；同时在Context中封装设置回调、执行回调并清空的逻辑，确保通用且可靠。

步骤1：修改AuthModalContext定义 #

用useRef替代useState存储回调函数，同时提供设置回调、执行回调的方法：

import { createContext, useContext, useRef, useState } from 'react';

const AuthModalContext = createContext();

export function AuthModalProvider({ children }) {
  const successCallbackRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  // 设置认证成功后的回调
  const setSuccessCallback = (callback) => {
    successCallbackRef.current = callback;
  };

  // 执行回调并清空，同时关闭弹窗
  const executeSuccessCallback = () => {
    if (typeof successCallbackRef.current === 'function') {
      successCallbackRef.current();
      successCallbackRef.current = null; // 执行后清空，避免重复触发
    }
    setIsOpen(false);
  };

  return (
    <AuthModalContext.Provider
      value={{
        isOpen,
        setIsOpen,
        setSuccessCallback,
        executeSuccessCallback,
      }}
    >
      {children}
    </AuthModalContext.Provider>
  );
}

export const useAuthModal = () => useContext(AuthModalContext);

步骤2：按钮点击事件中绑定回调 #

在需要触发认证的按钮处，使用useCallback稳定回调函数，打开弹窗时同时设置回调：

import { useAuthModal } from '../contexts/AuthModalContext';
import { useCallback } from 'react';

function LikeButton() {
  const { setIsOpen, setSuccessCallback } = useAuthModal();

  // 用useCallback稳定回调引用，避免重渲染时生成新函数
  const handleLike = useCallback(() => {
    console.log("执行点赞操作");
    // 这里写入实际的点赞业务逻辑
  }, []);

  const handleClick = () => {
    // 假设此处已判断用户未登录
    setSuccessCallback(handleLike);
    setIsOpen(true);
  };

  return <button onClick={handleClick}>点赞</button>;
}

步骤3：AuthDialog组件中执行回调 #

在AuthDialog的认证成功逻辑中，调用executeSuccessCallback：

import { useAuthModal } from '../contexts/AuthModalContext';
import { Dialog } from '@radix-ui/react-dialog';

function AuthDialog() {
  const { isOpen, executeSuccessCallback } = useAuthModal();

  const handleAuthSuccess = async () => {
    // 执行实际的认证逻辑（比如调用登录接口）
    await loginApi();
    // 认证成功后触发回调并关闭弹窗
    executeSuccessCallback();
  };

  return (
    <Dialog open={isOpen}>
      {/* 弹窗内容（账号输入、密码输入等） */}
      <button onClick={handleAuthSuccess}>完成登录</button>
    </Dialog>
  );
}

补充说明 #

• 用useRef存储回调避免了引用类型在重渲染时的丢失问题，比useState更适合存储函数；
• 执行回调后清空successCallbackRef.current，可以避免用户再次打开弹窗时触发旧的回调；
• 所有自定义回调建议用useCallback包裹，确保引用稳定，同时减少不必要的组件重渲染。

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