首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >接下来,js解决了,而没有发送/ API / this的响应,这可能会导致请求停滞。

接下来,js解决了,而没有发送/ API / this的响应,这可能会导致请求停滞。
EN

Stack Overflow用户
提问于 2021-09-24 16:56:12
回答 1查看 2.5K关注 0票数 1

在下面的API resolved without sending a response for /api/contact, this may result in stalled request路径上获取Next.js。它使用sendgrid,电子邮件被发送,但我没有得到回复,所以我可以处理错误或成功消息。

我已经用前端代码更新了下面的内容。我现在没有收到该错误,但在前端调用'const响应=等待获取(‘/api/联系人’.‘什么都不回

代码语言:javascript
运行
复制
const sgMail = require('@sendgrid/mail');

sgMail.setApiKey(process.env.SENDGRID_APIKEY);

export default function handler(req, res) {
    if (req.method === 'POST') {
        const email = {
            from: process.env.EMAIL_FROM,
            to: process.env.EMAIL_TO,
            subject: 'Website Contact Form',
            html: `<div>
          <div><strong>Name:</strong> ${req.body.name}<br/></div>
          <div><strong>Phone:</strong> ${req.body.phone}<br/></div>
          <div><strong>Email:</strong> ${req.body.email}<br/></div>
          <div><strong>more:</strong> ${req.body.more}<br/></div>
        </div>`,
        };

        try {
            return sgMail
                .send(email)
                .then(() => {
                    console.log('res1', res);
                    //return res;
                    return res.status(200).end();
                })
                .catch((error) => {
                    console.log('error', error);
                    return res.status(500).send(error);
                });
        } catch (error) {
            console.log('error 2', error);
            res.json(error);
            return res.status(405).end();
        }
    }
}
代码语言:javascript
运行
复制
import React from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';

import TextAreaField from './textAreaField';
import TextField from './textfield';

function ContactForm() {
    return (
        <Formik
            initialValues={{
                name: '',
                phone: '',
                email: '',
                more: '',
            }}
            validationSchema={Yup.object({
                name: Yup.string().required('Required'),
                phone: Yup.string().required('Required'),
                email: Yup.string().email('Invalid email address').required('Required'),
                more: Yup.string().required('Required'),
            })}
            onSubmit={async (values, { setSubmitting }) => {
                setSubmitting(true);
                const response = await fetch('/api/contact', {
                    body: JSON.stringify({
                        name: values.name,
                        phone: values.phone,
                        email: values.email,
                        more: values.more,
                    }),
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    method: 'POST',
                });
                console.log('response', response);
                const data = await response.json();
                console.log('response 1', data);
                setSubmitting(false);
            }}
        >
            {(props) => {
                const { values, setFieldValue } = props;
                console.log('props', props);
                console.log('values', values);
                return (
                    <div className="c-contact-form">
                        <Form className="form">
                            <TextField label="Customer Name" name="name" type="text" placeholder="John" />
                            <TextField label="Phone Number" name="phone" type="text" placeholder="07909765432" />
                            <TextField label="Email Address" name="email" type="email" placeholder="John@gmail.com" />
                            <TextAreaField label="More" name="more" placeholder="More details" />
                            <button type="submit" className="c-btn">
                                Submit
                            </button>
                        </Form>
                        {values.success && (
                            <div>
                                <p>Your enquiry has been successfully submitted.</p>
                            </div>
                        )}
                        {values.nosend && (
                            <div>
                                <p>OOPS, something went wrong but we know about it. please contact us via email or phone</p>
                            </div>
                        )}
                    </div>
                );
            }}
        </Formik>
    );
}

export default ContactForm;
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-25 04:35:09

您需要发送一个响应,如下所示

代码语言:javascript
运行
复制
try {
  sgMail
    .send(email)
     .then(() => {
         console.log('res', res.json);
         return res.status(200).end();
     })
      .catch((error) => {
        console.log('error', error);
        return res.status(500).send(error);
     });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69318691

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档