Блог

Это приложение находится в моем github (https://github.com/CSTy28/PhlattMusic ).

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

Единственными компонентами, задействованными на сервере, являются contact.js в папке компонентов и index.js в папке сервера. Это мой код для contact.js использование axios для отправки на сервер:

 import {useState, useEffect} from 'react';
import axios from 'axios';


function Contact() {

    const [state, setState] = useState({
        name: '',
        email: '',
        message: ''
    });

    const [result, setResult] = useState(null);

    const onInputChange = event => {
        //var name = event.target.name;
        //var value = event.target.value
        const {name, value} = event.target
    
        setState({
          ...state,
          [name]: value
        });
        console.log(state)
      };

    const sendEmail = event => {
        event.preventDefault();
        axios
            .post('/send', { ...state })
            .then(response => {
                setResult(response.data);
                setState({ name: '', email: '', subject: '', message: '' });
            })
            .catch(() => {
                setResult({ success: false, message: 'Something went wrong. Try again later'});
            });
    }
    



    



    function scroll (){
        console.log(window.scrollY)
        if (window.scrollY > 2000) {
            var citems = document.querySelectorAll('.contact-item');
            citems.forEach(inp => inp.classList.add('active'))
        }
      }
    
        window.addEventListener('scroll', scroll)

    return (
        <section className='contactSection' id='contact-me'>

            <div>
                <h1 className='contact-item c-item1'>Contact Me</h1>
            </div>

            {result amp;amp; (
        <p className={`${result.success ? 'success' : 'error'}`}>
          {result.message}
        </p>
      )}
            
            <form onSubmit={sendEmail}>
                <div className='contact-item c-item2'>
                    <input type='text' name='name' placeholder='Name' onChange={onInputChange} ></input>
                </div>
                <div className='contact-item c-item3'>
                    <input type='email' name='email' placeholder='Email Address' onChange={onInputChange} ></input>
                </div>
                <div className='contact-item c-item4'>
                    <textarea type='text' name='message' placeholder='Message' cols='60' rows='10' onChange={onInputChange} ></textarea>
                </div>
                <button className='contact-item c-item5' type='submit'>SEND</button>
                
                
            </form>
            
        </section>
    )
}

export default Contact
 

Это код для серверной части, использующей express для получения информации из формы на интерфейсе. В developompent все работает, но на моем phlatt.herokuapp.com на сайте я получаю сообщение об ошибке.

 const sgMail = require("@sendgrid/mail");
const dotenv = require('dotenv');
dotenv.config();

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

const path = require('path');
const express = require('express');
const transporter = require('./config');
//const dotenv = require('dotenv');
//dotenv.config();
const app = express();


const buildPath = path.join(__dirname, '..', 'build');
app.use(express.json());
app.use(express.static(buildPath));

app.post('/send', (req, res) => {
  console.log(req.body)
  const msg = {
    to: req.body.email,
    from: "CSTyy28@gmail.com",
    subject: "Confirmation",
    text: req.body.message,
    html:`
        <p>You have a new contact request.</p>
        <h3>Contact Details</h3>
        <ul>
          <li>Name: ${req.body.name}</li>
          <li>Email: ${req.body.email}</li>
          <li>Subject: "Confirmation"</li>
          <li>Message: ${req.body.message}</li>
        </ul>`
  };

  sgMail.send(msg).then(() =>  {
    console.log('Message sent')
  }).catch((error) => {
    console.log(error.response.body)
    // console.log(error.response.body.errors[0].message)
  })
  
});



app.listen(443, () => {
  console.log('server start on port 4000');
});
 

В документах говорится, что нужно следовать нескольким командным строкам, чтобы скрыть ваш ключ api. Я убежден, что это первопричина вашей проблемы. Простое размещение REACT_APP_SENDGRID_API_KEY=YOUR_API_KEY в файле .env будет отлично работать для heroku, если конфигурация на heroku была настроена с той же информацией. Другими словами, существует конфликт между heroku и тем, как SendGrid хранит переменную env….На более легкой ноте я даже не смог заставить свои nodejs отправлять электронное письмо из-за различных проблем, которые не были описаны в документах, поэтому я собираюсь использовать emailjs … SendGrid для птиц.