Блог

Моя контактная форма не отправляет пользователя интерфейса на мою страницу «Спасибо» и не отправляет мне никакой информации через API Sendgrid. Проблема заключается в том, что я не уверен, как превратить объект JSON в строку, а затем сразу вернуться к объекту….. Или, как вы можете видеть, мне трудно даже сформулировать свой вопрос. Цель состояла бы в том, чтобы отправить информацию в мою учетную запись электронной почты с помощью API Sendgrid.

Форма находится здесь в прямом эфире: https://www.metsanotus.fi/yhteydenotto

Код основан на 99% от этих двух учебных пособий:

https://oliverschmidt.dev/blog/adding-a-contact-form-to-a-static-site-with-netlify-functions/

https://dev.to/char_bone/using-netlify-lambda-functions-to-send-emails-from-a-gatsbyjs-site-3pnb

Код для контактной страницы: https://gist.github.com/otsolap/f05cd4e3a1a08794f61a6d5730abc695

 
import React, { useState } from "react";
import { graphql } from "gatsby"
import { RiSendPlane2Line } from "react-icons/ri";

import Layout from "../components/layout"
import SEO from "../components/seo"

export const pageQuery = graphql`
  query ContactQuery($id: String!){
        markdownRemark(id: { eq: $id }) {
      id
            html
            excerpt(pruneLength: 140)
      frontmatter {
        title
      }
    }
    site {
      siteMetadata {
        title
      }
    }
  }
`

const Contact = ({ data }) => {
  const { markdownRemark, site } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  // input type hidden on netlifytä varten, jotta netlify tietää mikä lomake kyseessä.
  // contact on meidän lomake, niin kaikki viestit löytyy contact-lomakkeen alta.
  // honeypot=bot-field on botteja varten.
  // p hidden pitää kohdan piilossa, mutta console.logilla sen löytää. ;-)


  const [formState, setFormState] = useState({
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: '',
  })

  const handleChange = (e) => {
    setFormState({
      ...formState,
      [e.target.name]: e.target.value,
    });
  }

  const handleSendEmail = async (event) => {
    event.preventDefault();

    try {
      const response = await fetch("/.netlify/functions/contact-form-email", {
        method: "POST",
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formState),
      })
      if (!response.ok) {
        //EI 200 response
        return
      }
      //all OK
    } catch (event) {
      //error
    }
  }



  return (
    <Layout className="contact-page">
      <SEO
        title={frontmatter.title}
        description={frontmatter.title   " "   site.siteMetadata.title}
      />
      <div className="wrapper">
        <h1>{frontmatter.title}</h1>
        <div className="description" dangerouslySetInnerHTML={{ __html: html }} />
        <form className="contact-form"
          action="/kiitos"
          name="contact"
          method="POST"
          data-netlify="true"
          value="contact"
          data-netlify-honeypot="bot-field"
          onSubmit={handleSendEmail}
        >
          <input type="hidden" name="form-name" value="contact" />
          <p hidden><input name="bot-field" /></p>
          <p>
            <label><input
              required
              placeholder="Nimi *"
              type="text"
              name="name"
              onChange={handleChange}
            />
            </label>
          </p>
          <p>
            <label><input required
              placeholder="Sähköposti *"
              type="email"
              name="email"
              onChange={handleChange}
            />
            </label>
          </p>
          <p>
            <label><input required
              placeholder="Puhelin *"
              type="number"
              name="phone"
              onChange={handleChange}
            />
            </label>
          </p>
          <p>
            <label><input placeholder="Aihe"
              type="text"
              name="subject"
              onChange={handleChange}
            />
            </label>
          </p>
          <p>
            <label><textarea
              placeholder="Viesti"
              name="message"
              onChange={handleChange}
            ></textarea></label>
          </p>
          <p className="text-align-center">
            <button className="button"
              type="submit">
              Lähetä<span className="icon -right"><RiSendPlane2Line />
              </span>
            </button>
          </p>
        </form>
      </div>
    </Layout>
  )
}

export default Contact
 

Код для бессерверной функции:
https://gist.github.com/otsolap/e157b136aee040281f20ba87131014eb

 require('dotenv').config();
const sgMail = require('@sendgrid/mail')
const {
  SENDGRID_API_KEY,
  METSAN_OTUS_NAME,
  METSAN_OTUS_ADDRESS }
  = process.env

sgMail.setApiKey(SENDGRID_API_KEY)

exports.handler = async (event, context, callback) => {

  const payload = JSON.parse(event.body)
  const { email, subject, message } = payload

  const msg = {
    to: METSAN_OTUS_ADDRESS,
    name: METSAN_OTUS_NAME,
    from: email,
    subject: subject ? subject : 'Yhteydenotto lomakkeesta',
    text: message,
  };

  try {
    await sgMail.send(msg)
    return {
      statusCode: 200,
      body: "Viesti lähetetty"
    }
  } catch (e) {
    return {
      body: e.message,
      statusCode: 500,
    }
  }
};
 

Когда я сохраняю JSON.parse(body.event), это ошибка, которую он отображает:
https://gist.github.com/otsolap/79830f6cf1e9b247c63c1f3f49c5286b

 SyntaxError: Unexpected token u in JSON at position 0
 

Если я изменю строку 13 из serverless-function.js от JSON.parse(event.body) до (например) JSON.stringify(event.body) ошибка становится такой:

 TypeError: Cannot destructure property 'email' of 'payload' as it is undefined.
 

Поэтому я предполагаю, что мой вопрос заключается в том, как я должен сформулировать свою бессерверную функцию, чтобы объект React из useState мог стать читаемым для моей функции?