javascript - 如何将预填充的 React 输入表单中的 props 传递回 Express？

Question

在我的 React 应用程序中，我使用 Express 和 Sendgrid 创建了一个简单的支持表单。发布请求使用如下输入表单:

support.jsx

  <form method="POST" action="http://localhost:4000/support">
    <div>
      <label htmlFor="email">
        <div>Email:</div>
        <input type="text" name="name" required />
      </label>
    </div>

support.js(Express)

app.post('/support', (req, res) => {
  const { email = '', name = '', message = '' } = req.body

  mailer({ email, name, text: message }).then(() => {
    console.log(`Sent the message "${message}" from <${name}> ${email}.`);
    res.redirect('/#success');
  }).catch((error) => {
    console.log(`Failed to send the message "${message}" from <${name}> ${email} with the error ${error && error.message}`);
    res.redirect('/#error');
  })
})

这有效，当我手动输入电子邮件时，我可以发送电子邮件。但是，由于此应用程序已对用户进行身份验证，因此我现在尝试在输入字段中传递当前用户的电子邮件地址，如 StackOverflow 答案所示:( How do I programatically fill input field value with React? )。

currentUser.email 的属性在 App.js 中设置，并且可以在整个应用程序的其他地方使用。

SupportForm.jsx 已更新

      <label htmlFor="email">
        <div className="label-content">Email:</div>
        <input type="email" name={props.currentUser.email} placeholder={props.currentUser.email} disabled />
      </label>

support.js (Express)已更新

const sgMail = require('@sendgrid/mail');
const { Router } = require('express');
const { User } = require("../models");
const supportRouter = Router();

  supportRouter.post('/support', async (req, res) => {
    
    try {
    const email = await User.findOne({email: req.body.email});
    const { message = '' } = req.body
    
    sgMail.setApiKey('PROCESS.ENV.SG');
   
    const msg = {
        to: 'me@gmail.com',
        from: email,
        subject: 'Support Request',
        text: message
    }

...// omittedcode ...

  module.exports = {
    supportRouter,
  };

这也有效({"message": "success"})，但是当我检查电子邮件时，它是从中的同一电子邮件发送到: const msg 导致欺骗电子邮件。

如何将当前用户的电子邮件发送到请求？我现在有点迷失，所以提前感谢您为我指明了正确的方向。

Answer 1

您是否尝试记录req.body.email来检查问题是否与后端相关？我相信您的 Controller 中的email变量是未定义，这导致sendgrid默认使用相同的地址from和to.但信息如此之少，很难知道。

希望对您有所帮助!