Firebase sendResetPasswordEmail 触发两次？

Question

我试图让用户在文本字段中输入他们的 email 地址，然后单击提交按钮以使用 firebase 的重置方法向他们发送重置链接。 唯一的问题是，我可以让它以一种方式工作，但它会触发两次，甚至在单击按钮之前触发。 我有一个注释掉的 function 应该可以工作，但由于某种原因不能工作。 注释掉的那个不起作用的任何原因？ 仍然是新的反应，所以任何帮助表示赞赏！

代码：

import React, { useState } from "react";
import { useNavigate } from 'react-router-dom';
import { getAuth, sendPasswordResetEmail } from "firebase/auth";

import '../scss/pages/ForgotPage.scss'

function ForgotPassword() {

    const navigate = useNavigate();

    const [email, setEmail] = useState('')
    const auth = getAuth();


 //   const triggerResetEmail = async () => {
 //       await sendPasswordResetEmail(auth, email)
 //           .then(() => {
 //               navigate('/signin')   //   Issue, keep reseaching
 //           })
 //           .catch((error) => {
 //               const errorCode = error.code;
 //               const errorMessage = error.message;
//
 //           });
 //   }

    sendPasswordResetEmail(auth, email)
        .then(() => {
            // Password reset email sent!
            navigate('/signin')
            // ..
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            // ..
        });

    return (
        <div className='pageBackground'>
            <div className='loginContainer'>
                <div className="regForm-container sign-in-container">
                    <form className='regForm' action="/">
                        <h1 className='formHeader'>Enter your login email</h1>
                        <input className='loginInput' type="email" placeholder="Email" onChange={(a) => setEmail(a.target.value)} value={email} required />
                        <button className='ghost' onClick={() => sendPasswordResetEmail}>Reset</button>
                    </form>
                </div>
                <div className="overlay-container">
                    <div className="overlay">
                        <div className="overlay-panel overlay-right">
                            <h1 className='formHeader'>Don't sweat it</h1>
                            <h5 className='regP'>Forgetting a password happens to the best of us!</h5>
                            <h5 className='regP'>But just in case you remembered</h5>
                            <button className='ghost' onClick={() => navigate('/signin')}>Log In</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default ForgotPassword;

Answer 1

您正在功能组件的 function 主体中调用 sendPasswordResetEmail(auth, email) 。 这意味着每次组件渲染时都会调用它。 就像您将console.log("rendering")放入 function 正文中一样。

const someFunction = () => {
    sendPasswordResetEmail(auth, email);
};

and

<button onClick={someFunction} />