问题：

带有nodemailer和Firebase函数的reactjs联系表单-RangeError：超出最大调用堆栈大小

端木夕

2023-03-14

我想我几乎处于与我联系的表格的最后一步，但我似乎无法理解它。我有另一个类似的表单设置，尽管它不处理其中的火基函数。我一直在看几个教程，看看我如何能够修复它，但没有运气。

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

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

https://better programming . pub/a-简单易用的联系方式-逐步指南-react-js-1532bc025980

https://academind.com/tutorials/sending-an-email-with-react-and-cloud-functions/

我已经在我的firebase函数索引中设置了代码.js并且我已经用postman对其进行了测试，并且它成功了。所以我知道索引.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
})

原始代码< code>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说不要在render调用内部调用setState，因为它执行无限循环。

由于历史记录.push（“/ContactUs”）呼叫，单击提交按钮后，表单会清除，但电子邮件未发送，并且我无法在我的firebase函数仪表板上看到任何已调用的sendMail。

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

任何和所有的帮助都是值得赞赏的。

@somoneSpecial comments于2021 5月16日更新

更新代码:

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

颛孙昆

2023-03-14

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

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

另一个问题是你的ref，你必须使用ref.current，而不仅仅是ref。参见< code >发送电子邮件

因为您正在使用firebase.functions（）。httpsCallable，确保您。onCall（）而不是onRequest（）。

带有nodemailer和Firebase函数的reactjs联系表单-RangeError：超出最大调用堆栈大小

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档