时间戳

首页 > 解决方案 > 如何将预填充的 React 输入表单中的道具传递回 Express？

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

问题描述

在我的 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（快递）

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设置在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:， const msg从而导致欺骗电子邮件。

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

标签： javascriptnode.jsreactjssequelize.js

解决方案

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

我希望这会有所帮助！

推荐阅读