React中onSubmit调用Context内register函数显示undefined问题

核心问题1：变量定义顺序错误 #

你在authState对象里提前引用了handleRegister，但这个函数是在authState之后才声明的。按照JavaScript的变量提升规则，此时handleRegister还处于未初始化状态，导致authState.register值为undefined。

修复方法：将handleRegister的定义移到authState之前：

const AuthProvider = ({children}) => {
const [signUp, setSignUp] = useState([]);
const [formData, setFormData] = useState(FORM_FIELDS);

// 先定义handleRegister函数
const handleRegister = async () => {
   const response = await axios
    .post(process.env.API_BASE_URL + API_ENDPOINTS.SIGN_UP, {
     email: formData.email,
     first_name: formData.firstName,
     last_name: formData.lastName,
     password: formData.password,
   })
   .then(data => console.log(data, 'apiData'));
 console.log(response, 'response');
};

// 再创建authState，此时handleRegister已存在
const authState = {
  signUpData: signUp,
  setSignUp: setSignUp,
  setFormData: setFormData,
  formData: formData,
  register: handleRegister,
};

 return (
   <ApiContext.Provider value={authState}>{children}</ApiContext.Provider>
  );
};

核心问题2：createContext初始值错误 #

你创建上下文时传入了AuthProvider组件作为初始值：

export const ApiContext = createContext(AuthProvider);

这不符合React Context的使用规范，初始值应该是一个与上下文值结构匹配的默认值（比如空对象），避免组件未被Provider包裹时出现异常：

export const ApiContext = createContext({});

额外优化建议 #

• handleRegister中同时使用await和.then()写法冗余，统一风格更易维护：

const handleRegister = async () => {
  try {
    const response = await axios.post(process.env.API_BASE_URL + API_ENDPOINTS.SIGN_UP, {
      email: formData.email,
      first_name: formData.firstName,
      last_name: formData.lastName,
      password: formData.password,
    });
    console.log(response, 'apiData');
  } catch (error) {
    console.error('注册失败:', error);
  }
};

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