React新手遇解构错误：无法从useAuth获取signup

错误信息 #

Uncaught TypeError: Cannot destructure property 'signup' of '(0 , contexts_AuthContext__WEBPACK_IMPORTED_MODULE_1_.useAuth)(...)' as it is undefined.
at SignUp (SignUp.js:9:1)

核心问题与修复步骤 #

1. AuthProvider 递归渲染错误 #

你的AuthContext组件存在致命错误：AuthProvider返回了自身，导致无限递归，最终useAuth()无法获取有效上下文值，返回undefined，引发解构错误。

修复AuthContext.js：

// 错误写法（递归渲染）
return <AuthProvider value={value}>{children}</AuthProvider>;

// 正确写法（使用Context.Provider）
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

2. 方法名大小写不匹配 #

AuthContext中定义的方法是signup（全小写），但SignUp.js中解构的是signUp（驼峰），导致无法找到该方法。

修复SignUp.js：

// 错误写法
const { signUp } = useAuth();

// 正确写法
const { signup } = useAuth();

同步修改提交函数中的调用：

await signup(emailRef.current.value, passwordRef.current.value);

3. 密码匹配逻辑反向 #

当前代码逻辑是密码相等时提示不匹配，完全颠倒：

// 错误写法
if (passwordRef.current.value === passwordConfirmedRef.current.value) {
  return setError("Passwords do not match");
}

// 正确写法
if (passwordRef.current.value !== passwordConfirmedRef.current.value) {
  return setError("Passwords do not match");
}

4. signup 方法未返回 Promise #

auth.createUserWithEmailAndPassword返回Promise，但你的signup方法未返回它，导致await无法正确等待异步操作完成：

// 错误写法
function signup(email, password) {
  auth.createUserWithEmailAndPassword(email, password);
}

// 正确写法
function signup(email, password) {
  return auth.createUserWithEmailAndPassword(email, password);
}

App.jsx 中 AuthProvider 的正确放置 #

必须用AuthProvider包裹所有需要使用useAuth()的组件，确保上下文能被全局访问。示例：

import { AuthProvider } from './contexts/AuthContext';
import SignUp from './components/SignUp';

function App() {
  return (
    <AuthProvider>
      {/* 所有需要访问Auth上下文的组件都放在此处 */}
      <SignUp />
      {/* 如登录页、主页等 */}
    </AuthProvider>
  );
}

export default App;

确保AuthProvider处于组件树的顶层位置，覆盖所有需要使用认证功能的子组件。

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