Question

我在联系表单上使用React与前端的axios以及Express与本地主机的nodemailer的联系表单存在问题。预期的结果是，当我单击“提交”按钮时，我应该收到电子邮件，但是当我单击它时，网站将刷新并且URL会更改为：http://localhost:3000/?email=test%40gmail.com&message=fdsfd（如果我在{{ 1}}字段，则不会收到电子邮件。

我的前端包含App.tsx文件（我使用reactstrap进行样式设置）：

test@gmail.com

我的后端包含index.ts文件：

email

对于启动应用程序（后端和前端），我同时使用，如下所示：

import React, { Component } from "react";
import { Button, Form, FormGroup, Label, Input } from "reactstrap";
import axios from "axios";

class App extends Component {
  state = {
    email: "",
    message: ""
  };

  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ email: e.target.value, message: e.target.value });
  };

  async handleSubmit(e: React.ChangeEvent<HTMLInputElement>) {
    e.preventDefault();
    const email = {
      email: this.state.email
    };

    const message = {
      message: this.state.message
    };

    const form = await axios.post("/api/form", {
      email,
      message
    });
  }

  render() {
    return (
      <>
        <div>
          <Form id="contact-form">
            <FormGroup onSubmit={this.handleSubmit} method="POST">
              <Label for="exampleEmail">Email</Label>
              <Input
                type="email"
                name="email"
                id="email"
                placeholder="with a placeholder"
                onChange={this.handleChange}
              />
            </FormGroup>
            <FormGroup>
              <Label for="exampleMessage">Message</Label>
              <Input
                type="textarea"
                name="message"
                id="message"
                placeholder="with a placeholder"
                onChange={this.handleChange}
              />
            </FormGroup>
            <Button type="submit">Submit</Button>
          </Form>
        </div>
      </>
    );
  }
}

export default App;

应用启动后终端中的输出如下所示：

import express, { Application, Request, Response, NextFunction } from "express";
import bodyParser from "body-parser";
import nodemailer from "nodemailer";

const app: Application = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.post("/api/form", (req: Request, res: Response) => {
  nodemailer.createTestAccount((err, account) => {
    const htmlEmail = `
    <h3>Contact details</h3>
    <ul>
        <li>Email: ${req.body.email}</li>
    </ul>
    <h3>Message</h3>
    <p>${req.body.message}</p>
     `;

    const transporter = nodemailer.createTransport({
      host: "smtp.ethereal.email",
      port: 587,
      auth: {
        user: "MY_TEST_EMAIL_NAME",
        pass: "MY_TEST_EMAIL_PASSWORD"
      }
    });
    const mailOptions = {
      from: "test@testaccount.com",
      to: "MY_TEST_EMAIL_NAME",
      replyTo: "test@testaccount.com",
      subject: "new message",
      text: req.body.message,
      html: htmlEmail
    };
    transporter.sendMail(mailOptions, (err, info) => {
      if (err) {
        return console.log(err);
      }
      console.log("message sent: %s =", info.message);
      console.log("message URL: %s =", nodemailer.getTestMessageUrl(info));
    });
  });
});

const PORT = 5000;

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

单击“提交”后，可以更改哪些以接收电子邮件？似乎从未使用过使用axios定义的表单，但是我不知道如何解决它。这是我在StackOverflow上的第一篇文章。预先感谢。

Answer 1

由于这一行，它只是一个warning

const form = await axios.post("/api/form", {
      email,
      message
});

在这里，您已将axios调用的返回分配给了form变量，但是您从未使用过它。您只需要删除它，

await axios.post("/api/form", {
      email,
      message
});

或者您也可以仅将其用于console.log。

const form = await axios.post("/api/form", {
      email,
      message
});

console.log(form); //check here

如何修复“表单”已分配值，但从未在axios中使用

1 个答案: