我是新手反应，我已经坚持了一段时间。不断收到未捕获的错误

Question

我得到两个错误，第一个是说它可以解构。 它说错误来自我的注册.js文件

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)

我无法看到我的注册.js文件中出了什么问题

import React, { useRef, useState } from "react";
import { Form, Button, Card, Container, Alert } from "react-bootstrap";
import { useAuth } from "../contexts/AuthContext";
function SignUp() {
const emailRef = useRef();
const passwordRef = useRef();
const passwordConfirmedRef = useRef();
const { signUp } = useAuth();
const [error, setError] = useState(" ");
const [loading, setLoading] = useState(false);
async function handleSubmit(e) {
e.preventDefault();
if (passwordRef.current.value === passwordConfirmedRef.current.value) {
return setError("Passwords do not match");
}
try {
setError("");
setLoading(true);
await signUp(emailRef.current.value, passwordRef.current.value);
} catch {
setError("Failed to create an account");
}
setLoading(false);
}
return (
<React.Fragment>
<Container
className="d-flex align-item-center justify-content-center"
style={{ minHeight: "40vh", marginTop: "10px" }}
>
<Card>
<Card.Body>
<h2 className="text-center mb-4">Sign Up</h2>
{error && <Alert variant="danger">{error}</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group id="email">
<Form.Label>Email</Form.Label>
<Form.Control
type="email"
ref={emailRef}
required
></Form.Control>
</Form.Group>
<Form.Group id="password">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
ref={passwordRef}
required
></Form.Control>
</Form.Group>
<Form.Group id="password-confirm">
<Form.Label>Password Confirmation</Form.Label>
<Form.Control
type="password"
ref={passwordConfirmedRef}
required
></Form.Control>
</Form.Group>
<Button
disabled={loading}
className="w-100"
type="submit"
style={{ marginTop: "20px" }}
>
Sign Up
</Button>
</Form>
</Card.Body>
</Card>
</Container>
<div className="w-100 text-center mt-2">
Already have an accoutn? Log in
</div>
</React.Fragment>
);
}
export default SignUp;

我也不确定我是否应该在 app.jsx 文件中添加 AuthProvider 标签，我应该不确定把它放在哪里。

import React, { useContext, useState, useEffect } from "react";
import { auth } from "../../firebase";
const AuthContext = React.createContext();
function useAuth() {
return useContext(AuthContext);
}
function AuthProvider({ children }) {
const [currentUser, setCurrentUser] = useState();
function signup(email, password) {
auth.createUserWithEmailAndPassword(email, password);
}
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((user) => {
setCurrentUser(user);
});
return unsubscribe;
}, []);
const value = {
currentUser,
signup,
};
return <AuthProvider value={value}>{children}</AuthProvider>;
}
export { useAuth, AuthProvider };

Answer 1

createContext需要使用默认值进行初始化。

const AuthContext = React.createContext({
currentUser: undefined,
signup: () => {},
});

Answer 2

代码中存在拼写错误。要导出的值signup，要解构的值signUp(字母 U 大写)