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

Question

我遇到了两个错误，第一个是说它可以解构。 它说错误来自我的 signup.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)

我看不到我的 signup.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 大写）