Strapi - Sendgrid 发送电子邮件

Question

我正在用 NextJS 和 Strapi 构建一个应用程序 我有 Strapi 版本：│ 3.0.1 (node v10.16.2)。

我正在使用 Sendgrid 发送电子邮件，但在将后端连接到我的表单以及要发送的电子邮件时遇到了很多麻烦。

我觉得我很接近，但我错过了一些东西。

这是我的电子邮件类型的文件结构： email file structure

插件：

module.exports = ({ env }) => ({  
email: {    
provider: 'sendgrid',    
providerOptions: {      
apiKey: env('SENDGRID_API_KEY'),    
},    
settings: {      
defaultFrom: env('SENDGRID_DEFAULT_FROM'),      
defaultReplyTo: env('SENDGRID_DEFAULT_REPLY_TO'),    },  },})

控制器：

module.exports = {

  send: async (ctx) => {
    let options = ctx.request.body;

    try {
      //Send email to the user
      await strapi.plugins['email'].services.email.send({
        to: options.to,
        from: 'info@example.com',
        subject: options.subject,
        html: options.html
      });
      ctx.send({ok: true})
    } catch (err) {
      return ctx.badRequest(null, err);
      
    }
    
  }
}

服务：

module.exports = {  
sendEmail: async (to, subject, html) => {    
strapi.log.info("services.email.sendEmail Sending email")    
strapi.plugins['email'].services.email.send({      
to,      
from: DEFAULT_FROM,      
replyTo: DEFAULT_REPLY_TO,      
subject,      
text,      
html,    
});    
strapi.log.info("services.email.sendEmail Email sent")    
return {message: 'Email Sent'}  }};

路线：

{  "routes": [{      
"method": "POST",      
"path": "/email-send",      
"handler": "email.send",      
"config": {        
"policies": []      
}    
}]}

我的表格：

import React, { useState } from 'react';

export default function corporate() {

return (

<form>
        <h3>Complete the form below.</h3>
        {/* <input type="text" id="name" class="fadeIn first" name="name" placeholder="First and Last Name"> */}
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>First Name**</p>
        <input type="text" id="name" className="fadeIn first" name="name" placeholder="Full Name" />
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Email**</p>
        <input type="email" id="email" className="fadeIn second" name="email" placeholder="Email" />
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Phone Number</p>
        <input type="text" id="phone" className="fadeIn third" name="phone" placeholder="Phone Number" />
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Number of People</p>
        <input type="text" id="people" className="fadeIn third" name="people" placeholder="Number of People" />
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Rental Request Start Date</p>
        <input type="date" name="date" id="date" />
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Rental Request End Date</p>
        <input type="date" name="enddate" id="enddate" />
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Time Requested</p>
        <input type="time" id="time" name="time" />
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Recurring Rental?</p>
        <select name="repeat" className="custom-select" id="inlineFormCustomSelectPref" style={{width: '85%'}}>
          <option selected>Choose...</option>
          <option name="opt" value="One Time Rental">One Time Rental</option>
          <option name="opt" value="Daily">Daily</option>
          <option name="opt" value="Weekly">Weekly</option>
          <option name="opt" value="Monthly">Monthly</option>
        </select>
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Room Setup Required?</p>
        <select name="roomsetup" className="custom-select" id="inlineFormCustomSelectPref" style={{width: '85%'}}>
          <option selected>Choose...</option>
          <option name="opt" value="None">None</option>
          <option name="opt" value="Information table(s) only">Information table(s) only</option>
          <option name="opt" value="Breakfast/Lunch/Dinner buffet">Breakfast/Lunch/Dinner buffet</option>
          <option name="opt" value="Theatre style">Theatre style</option>
          <option name="opt" value="Board meeting">Board meeting</option>
          <option name="opt" value="Conference">Conference</option>
          <option name="opt" value="Trade Show">Trade Show</option>
        </select>
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Select a Space</p>
        <select name="selectopt" className="custom-select" id="inlineFormCustomSelectPref" style={{width: '85%'}}>
          <option selected>Choose...</option>
          <option name="opt" value="Rec Centre Gym only(225 person max)">Rec Centre Gym only (225 person max)</option>
          <option name="opt" value="Rec Centre Meeting Room (80 person max)">Rec Centre Meeting Room (80 person max)</option>
          <option name="opt" value="Rec Centre Upper Mezzanine">Rec Centre Upper Mezzanine</option>
          <option name="opt" value="Health Centre Meeting Room (50 person max)">Health Centre Meeting Room (50 person max)</option>
          <option name="opt" value="School Gym">School Gym</option>
        </select>
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Additional Details</p>
        <textarea name="content" className="fadeIn fourth" id="content" cols={95} rows={10} defaultValue={"\n        "} />
        <input type="submit" className="fadeIn fifth" defaultValue="Submit" />
      </form>
)
}

当我使用邮递员发出 POST 请求时，我确实会收到一封电子邮件到我的收件箱。所以我觉得我很接近了！ Postman request

我一直在寻找高低，如果有人能提供帮助，我将不胜感激。

非常感谢！

编辑：

所以我在组件名称之后和'return'之前将以下代码添加到我的表单页面中，所以它看起来像这样：

import React, { useState } from 'react';

export default function corporate() {

  const { API_URL } = process.env


const [state, setState] = useState({ name: '', to: '' });
    const handleChange = event => {
      const { name, value } = event.target;
      setState({
        ...state,
        [name]: value
      });
    }
    const handlePress = () => {
      fetch(`${API_URL}/email-send`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: state.name, to: state.to })
      });
    }

<form>
        <h3>Complete the form below.</h3>
       
        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>First Name**</p>

        <input type="text" id="name" className="fadeIn first" name="name" placeholder="Full Name" onChange={handleChange} />

        <p className="my-1" style={{textAlign: 'left', marginLeft: '10%'}}>Email**</p>
        <input type="email" id="to" className="fadeIn second" name="to" placeholder="Email" onChange={handleChange} />
        
        <input onClick={handlePress} type="submit" className="fadeIn fifth" defaultValue="Submit" />
      </form>
)
}

但是现在我在提交表单时遇到以下错误：

[2020-06-23T21:02:57.777Z] error Error: Bad Request
    at Request.http [as _callback] (node_modules/@sendgrid/client/src/classes/client.js:124:25)
    at Request.self.callback (node_modules/request/request.js:185:22)
    at Request.emit (events.js:198:13)
    at Request.<anonymous> (node_modules/request/request.js:1154:10)
    at Request.emit (events.js:198:13)
    at IncomingMessage.<anonymous> (node_modules/request/request.js:1076:12)
    at Object.onceWrapper (events.js:286:20)
    at IncomingMessage.emit (events.js:203:15)
    at endReadableNT (_stream_readable.js:1145:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)
[2020-06-23T21:02:57.777Z] debug POST /email (452 ms) 500

Answer 1

您在后端创建了一个名为 /email-send 的路由。 发送电子邮件的正是这条路线。

但是在您的前端应用程序中 - 您正在调用 /send。

所以我认为你必须更新你在前端应用程序中调用的路由。