Контактная форма responsejs с функциями nodemailer и firebase — RangeError: превышен максимальный размер стека вызовов

Я думаю, что я на последнем этапе создания формы обратной связи, но я не могу ее получить. У меня есть другая форма, настроенная аналогично, хотя она не имеет отношения к функциям firebase в ней. Я просмотрел пару руководств, чтобы увидеть, как я могу это исправить, но не повезло.

Для любопытных, это те, на которые я смотрел:

1. https://pantaley.com/blog/How-to-integrate-Serverless-contact-form-using-Firebase-Cloud-functions-in-React/

2. https://betterprogramming.pub/a-simple-and-easy-contact-form-step-by-step-tutorial-react-js-1532bc025980

3. https://academind.com/tutorials/sending-an-email-with-react-and-cloud-functions/ ‹- мой любимый

У меня есть код, настроенный в моих функциях firebase index.js, и я протестировал его с помощью почтальона, и он прошел успешно. поэтому я знаю, что код index.js работает.

но когда я пытаюсь создать страницу для связи с приведенным ниже кодом, помеченным как исходный код, и нажимаю созданную мной кнопку отправки, ничего не происходит, и я вижу эту ошибку в консоли при проверке.

RangeError: Maximum call stack size exceeded
    at FiberNode.hasOwnProperty (<anonymous>)
    at mapValues (serializer.ts:29)
    at Serializer.encode (serializer.ts:61)
    at serializer.ts:61
    at mapValues (serializer.ts:30)
    at Serializer.encode (serializer.ts:61)
    at serializer.ts:61
<error repeats>

вот мой код для моей контактной формы. Когда я перехожу, он вешает трубку

sendEmail({
   name: nameRef,
   email: emailRef,
   message: messageRef
})

Исходный код contactUs.js

import React, {useRef, useState} from "react";
import {useAuth} from "../contexts/AuthContext";
import {useHistory} from "react-router-dom";
import firebase from 'firebase/app';
import classes from "./xclasses.module.scss";
import {Button, Container, Form} from "react-bootstrap";

const sendEmail = firebase.functions().httpsCallable('sendEmail');

export default function ContactUs() {
    const nameRef = useRef();
    const emailRef = useRef();
    const messageRef = useRef();
    const firmRef = useRef();
    const history = useHistory();

    const [error, setError] = useState("")
    const [loading, setLoading] = useState(false)

Что я пробовал:

Я попытался переместить вызов sendEmail за пределы handleSubmit самостоятельно из-за этого SO Post говорит, что не следует вызывать вызов setState внутри вызова рендеринга в основном потому, что он выполняет бесконечный цикл.

Форма очищается после нажатия кнопки отправки из-за вызова history.push (/ ContactUs), но электронное письмо не отправляется, и я не вижу вызова sendMail на моей панели функций firebase.

Попробуйте B-код

    const submitForm = async () => {
        await sendEmail({
            name: nameRef,
            email: emailRef,
            message: messageRef
        }).then(result => {
            console.log("contact-us message sent with " + result.data.message)        
        })
            .catch(error => {
                console.log(error);               
            });
    }*/

Исходный код

    async function handleSubmit(e) {
        e.preventDefault()

        setError("")
        setLoading(true)

       sendEmail({
            name: nameRef,
            email: emailRef,
            message: messageRef
        }).then(result => {
            console.log("contact-us message sent with " + result.data.message)            
        })
            .catch(error => {
                console.log(error);                
            });

        history.push("/ContactUs")
        setLoading(false)
    }

    return (
        <React.Fragment>
            <div className={classes.body}>
                <Container>
                    <div className={classes.body}>
                        <h2>Contact Us</h2>
                        {/*<Form onSubmit={submitForm}>*/} // also tried this (Try B Code)
                        <Form onSubmit={handleSubmit}>
                            <Form.Group id="email">
                                <Form.Label>Email</Form.Label>
                                <Form.Control type="email" ref={emailRef} required/>
                            </Form.Group>
                            <Form.Group id="name">
                                <Form.Label>Name</Form.Label>
                                <Form.Control type="text" ref={nameRef} required/>
                            </Form.Group>
                            <Form.Group id="message">
                                <Form.Label>Message</Form.Label>
                                <Form.Control type="text" ref={messageRef} required/>
                            </Form.Group>

                            <Form.Group id="firm">
                                <Form.Label>Firm</Form.Label>
                                <Form.Control type="text" ref={firmRef} required/>
                            </Form.Group>

                            {/*<Button onClick={submitForm} className="w-100" type="submit">*/}
                            // also tried this ^^ (Try B Code)
                            <Button disabled={loading} className="w-100" type="submit">
                                Send
                            </Button>
                        </Form>
                    </div>
                </Container>
            </div>
        </React.Fragment>
    )
}

Любая помощь приветствуется.

Обновление от 2021/05/16 из @somoneСпециальные комментарии

Обновленный код:

import React, {useRef, useState} from "react";
import {useAuth} from "../contexts/AuthContext";
import {useHistory} from "react-router-dom";
import firebase from 'firebase/app';
import classes from "./SyncManagerDemo.module.scss";
import {Button, Container, Form} from "react-bootstrap";


export default function ContactUs() {
    const nameRef = useRef();
    const emailRef = useRef();
    const messageRef = useRef();
    const firmRef = useRef();
    const history = useHistory();

    const [error, setError] = useState("")
    const [loading, setLoading] = useState(false)


    async function handleSubmit(e) {
        e.preventDefault()

        const sendEmail = firebase.functions().httpsCallable('sendEmail');
        console.log("nameRef: " + nameRef.current.value);
        console.log("emailRef: " + emailRef.current.value);
        console.log("messageRef: " + messageRef.current.value);

        const test = await sendEmail({
            name: nameRef.current.value,
            email: emailRef.current.value,
            message: messageRef.current.value
        }).then(function (result) {
            var messageSent = result.data.message;
            console.log(nameRef.current + " " + emailRef.current + " " + messageRef.current + " " + messageSent)
        });        
    }
return (
        <React.Fragment>
            <div className={classes.body}>
                <Container>
                    <div className={classes.body}>
                        <h2>Contact Us</h2>
                        {/*todo: convert to Bootstrap inputs: https://getbootstrap.com/docs/4.0/components/forms/ */}
                        {/*<Form onSubmit={submitForm}>*/}
                        {/*<Form onSubmit={sendEmail}>*/}
                        {/*<Form onSubmit={sendEmail2}>*/}
                        <Form onSubmit={handleSubmit}>
                            <Form.Group id="email">
                                <Form.Label>Email</Form.Label>
                                <Form.Control type="email" ref={emailRef} required/>
                            </Form.Group>
                            <Form.Group id="name">
                                <Form.Label>Name</Form.Label>
                                <Form.Control type="text" ref={nameRef} required/>
                            </Form.Group>
                            <Form.Group id="message">
                                <Form.Label>Message</Form.Label>
                                <Form.Control type="text" ref={messageRef} required/>
                            </Form.Group>

                            <Form.Group id="firm">
                                <Form.Label>Firm</Form.Label>
                                <Form.Control type="text" ref={firmRef} required/>
                            </Form.Group>

                            {/*<Button onClick={submitForm} className="w-100" type="submit">*/}
                            <Button disabled={loading} className="w-100" type="submit">
                                Send
                            </Button>
                        </Form>
                    </div>
                </Container>
            </div>
        </React.Fragment>
    )
}

теперь я получаю ошибку:

Uncaught (in promise) Error: internal
HttpsErrorImpl                          error.ts:65
_errorForResponse                       error.ts:175
(anonymous function)                    service.ts:276
step                                    tslib.es6.js:100
(anonymous function)                    tslib.es6.js:81
fulfilled                               tslib.es6.js:71
Async call from async function
handleSubmit                            ContactUs.js:47
callCallback                            react-dom.development.js:3945
invokeGuardedCallbackDev                react-dom.development.js:3994
invokeGuardedCallback                   react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError react-dom.development.js:4070
executeDispatch                         react-dom.development.js:8243
processDispatchQueueItemsInOrder        react-dom.development.js:8275
processDispatchQueue                    react-dom.development.js:8288
dispatchEventsForPlugins                react-dom.development.js:8299
(anonymous function)                    react-dom.development.js:8508
batchedEventUpdates$1                   react-dom.development.js:22396
batchedEventUpdates                     react-dom.development.js:3745
dispatchEventForPluginEventSystem       react-dom.development.js:8507
attemptToDispatchEvent                  react-dom.development.js:6005
dispatchEvent                           react-dom.development.js:5924
unstable_runWithPriority                scheduler.development.js:646
runWithPriority$1                       react-dom.development.js:11276
discreteUpdates$1                       react-dom.development.js:22413
discreteUpdates                         react-dom.development.js:3756
dispatchDiscreteEvent                   react-dom.development.js:5889