带有NodeEmailer和firebase函数的reactjs联系人表单-RangeError:超过最大调用堆栈大小

我想我已经接近建立联系我表单的最后一步了，但我似乎无法得到它。我有另一个类似的表单设置，尽管它不处理其中的firebase函数。我一直在看一些教程，看看如何修复它，但运气不好

对于好奇的人，我一直在看这些：

---

虽然我不知道是什么原因导致了错误，但我很确定这个函数有错误

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

    history.push("/ContactUs") //<=== this is being called before sendMail is completed.
    setLoading(false)

发送电子邮件({
名称：nameRef.current.value，
电子邮件：emailRef.current.value，
消息：messageRef.current.value
})。然后（结果=>{
console.log（“发送带有“+result.data.message”的联系我们消息）
})
.catch（错误=>{
console.log（错误）；
});
history.push（“/ContactUs”）//我在我的
异步函数handleSubmit（e）
中尝试了你的建议，但仍然得到了相同的错误。似乎挂断了
const result=
line.update答案。应该使用nameRef.current，而不仅仅是nameRef。请在console.log中记录所有的ref，以确保在通过提交之前获得所需的值（字符串）sendMail@somoneSpecial，我已更新帖子，现在显示新错误。很好的控制台调用日志记录REF。我不得不做
ref.current.value
来获得我想要的值。如果我只是执行
ref.current
，我会在控制台中获得
[object HTMLInputElement]
。同时，您能从sendmail函数调用中捕获错误吗？您应该使用
.onCall
，因为您使用的是
httpscalable
。请检查如何写入httpCallable函数的返回值-
sendEmail({
   name: nameRef,
   email: emailRef,
   message: messageRef
})

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)


    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>
    )
}

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

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

    history.push("/ContactUs") //<=== this is being called before sendMail is completed.
    setLoading(false)

   try {
     const results = await sendEmail({
            name: nameRef.current.value,
            email: emailRef.current.value,
            message: messageRef.current.value
        })
    console.log("contact-us message sent with " + result.data.message)  
    setLoading(false)
    history.push("/ContactUs") //<-- now this will be called properly.
    } catch (err) {
       console.log('error', error)
    }