javascript - React-Firebase-RecaptchaVerifier不是构造函数

我正在尝试创建一个使用“onSubmit”按钮触发handleSignUp()的React应用程序。但是，每次我调用handleSignUp()时都会出现此错误



Firebase初始化-base.js

import * as firebase from "firebase/app";
import "firebase/auth";

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});

export default app;

SignUp.js

import React, { Component } from "react";
import { withRouter } from "react-router";
import app from "./base";

class SignUp extends Component {
  componentDidMount() {
    window.recaptchaVerifier = new app.auth.RecaptchaVerifier(this.recaptcha, {
      size: "normal",
      callback: function(response) {
        console.log("reCAPTCHA solved, allow signInWithPhoneNumber.");
      },
      "expired-callback": function() {
        console.log("Response expired. Ask user to solve reCAPTCHA again.");
      }
    });
    window.recaptchaVerifier.render().then(function(widgetId) {
      window.recaptchaWidgetId = widgetId;
    });
  }

  handleSignUp = async () => {
    var phoneNumber = "[phone]";
    var appVerifier = new app.auth.RecaptchaVerifier("recaptcha-container");

    try {
      await app
        .auth()
        .signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function(confirmationResult) {
          window.confirmationResult = confirmationResult;
        });
    } catch (error) {
      alert(error);
    }
  };
  render() {
    return (
      <div ref={ref => (this.recaptcha = ref)}>
        <h1>Sign up</h1>
        <form onSubmit={this.handleSignUp}>
          <button type="submit">Sign Up</button>
        </form>
      </div>
    );
  }
}

export default withRouter(SignUp);

并运行var appVerifier = new app.auth.RecaptchaVerifier("recaptcha-container");自动刷新网页

最佳答案

我花了3个小时在此上，终于找到了问题。
当您初始化firebase应用程序时

app.initializeApp(config);

那么您可以使用以下方法调用方法: app.auth()

app.auth().createUserWithEmailAndPassword(email, password);

并创建RecaptchaVerifier实例，您必须使用: app.auth

window.recaptchaVerifier = new app.auth.RecaptchaVerifier('captcha-container', {
        'size': 'invisible'
    });

关于javascript - React-Firebase-RecaptchaVerifier不是构造函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58519055/