我的自定义函数中未调用 Firebase 函数 createUserWithEmailAndPassword

Question

当 onClick 事件发生时，函数 createUserWithEmailAndPassword 未在 SignUpUser 函数内调用。但是当我做 onClick={signUpUser(email,password)} 它有效

import React from 'react';

import styled from 'styled-components';
import { useState } from 'react';
import { signUpUser } from '../firebase';

function SignUpComponent() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    return (
        <AuthForm>
            <input type="text" 
            placeholder="Email" 
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}/>
            <input type="password" 
            name="password"
            placeholder="password" 
            value={password}
            onChange={(e) => setPassword(e.target.value)}/>
            <SubmitFormButton
            type="submit"  
            onClick={() => signUpUser(email,password)}
            >
            Sign Up
            </SubmitFormButton>
        </AuthForm>
    )
};

这是我的 firebase.js 文件

import { initializeApp } from "firebase/app";

import {
    getAuth,
    onAuthStateChanged,
    signInWithPopup,
    signOut,
    createUserWithEmailAndPassword,
    signInWithEmailAndPassword,
  } from 'firebase/auth';

const firebaseConfig = {
    apiKey: ****,
    authDomain: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***",
    appId: "***"
};

  // Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth();
auth.useDeviceLanguage();

// Auth functions

export function signUpUser(email, password) {

    if (password.length < 6) {
          alert('Password is too short');
          return;
    };

  ˚˚createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      alert('Signed up Successfully', user);
      })
      .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      alert(errorMessage);
      });
};

Answer 1

onClick={signUpUser(email,password)} 这里 signUpUser 在渲染过程中被调用，无论是否点击。

如果它以这种方式工作并且不适用于 onClick={() => signUpUser(email,password)} 那么就没有其他选择了，但是你的 SubmitFormButton 不会触发 onClick。也许它根本没有传递给 DOM。

Answer 2

问题是 Auth 表单应该实现 "onSubmit" 方法。我们不应该调用 SubmitFormButton 组件上的函数

我的自定义函数中未调用 Firebase 函数 createUserWithEmailAndPassword

Firebase function createUserWithEmailAndPassword is not being called within my custom function

javascript

onclick

promise

reactjs

firebase-authentication