如何將道具從預填充的 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 。 但在如此少的信息下很難知道。

我希望這有幫助！