如何将道具从预填充的 React 输入表单传递回 Express？

Question

在我的 React App 中，我使用 Express & Sendgrid 创建了一个简单的支持表单。 发布请求与这样的输入表单一起使用：

支持.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 答案所示：（ 如何使用 React 以编程方式填充输入字段值？ ）。

currentUser.email的 props 在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"} ），但是当我检查电子邮件时，它从同一电子邮件发送to: of const msg导致欺骗电子邮件。

如何将当前用户的电子邮件发布到请求中？ 在这一点上我有点迷茫，所以提前感谢你为我指明了正确的方向。

Answer 1

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

我希望这有帮助！