javascript - 为什么我的构造函数状态属性没有发送到 server.js？

Question

我正在尝试在使用 react/node.js 提交联系表单后发送电子邮件 - 我的构造函数变量没有被正确设置（我认为）并且每当我提交表单时在我的 server.js 中都是“未定义”。

提交表单后，我的所有变量（contactName、contactEmail、contactSubject、contactMessage）都应发送到 server.js，但 server.js 中的 req.body 对象未定义，并且没有这些变量的值。

如果有人有建议或知道不同的方法来做到这一点，请随时发表评论

免责声明：我是一个完整的 js 菜鸟，我有 #C/.NET 和 python 背景。请原谅我，因为我知道这是一个简单的解决方法。

日志

undefined
TypeError: Cannot read property 'contactName' of undefined
    at Z:\web-development\react\react-resume\server.js:101:25

联系.js

import React, { Component } from "react";
import { Fade, Slide } from "react-reveal";
import axios from "axios";

class Contact extends Component {

  constructor(props) {
    super(props);
    this.state = {
      contactName: '',
      contactEmail: '',
      contactSubject: '',
      contactMessage: ''
    }
  }

  onNameChange(event) {
    this.setState({contactName: event.target.value})
  }
  onEmailChange(event) {
      this.setState({contactEmail: event.target.value})
  }

  onSubjectChange(event) {
      this.setState({contactSubject: event.target.value})
  }

  onMsgChange(event) {
      this.setState({contactMessage: event.target.value})
  }

  render() {
    if (!this.props.data) return null;


    const name = this.props.data.name;
    const street = this.props.data.address.street;
    const city = this.props.data.address.city;
    const st = this.props.data.address.state;
    const zip = this.props.data.address.zip;
    const phone = this.props.data.phone;
    const message = this.props.data.message;

    return (
      <section id="contact">
        <Fade bottom duration={1000}>
          <div className="row section-head">
            <div className="two columns header-col">
              <h1>
                <span>Get In Touch.</span>
              </h1>
            </div>

            <div className="ten columns">
              <p className="lead">{message}</p>
            </div>
          </div>
        </Fade>

        <div className="row">
          <Slide left duration={1000}>
            <div className="eight columns">

              <form id="contactForm" onSubmit={this.submitEmail.bind(this)} method="POST">
                <fieldset>
                  <div>
                    <label htmlFor="contactName">
                      Name <span className="required">*</span>
                    </label>
                    <input
                      type="text"
                      defaultValue=""
                      size="35"
                      id="contactName"
                      name="contactName"
                      required value={this.state.contactName}
                      onChange={this.onNameChange.bind(this)}
                    />
                  </div>

                  <div>
                    <label htmlFor="contactEmail">
                      Email <span className="required">*</span>
                    </label>
                    <input
                      type="text"
                      defaultValue=""
                      size="35"
                      id="contactEmail"
                      name="contactEmail"
                      required value={this.state.contactEmail}
                      onChange={this.onEmailChange.bind(this)}
                    />
                  </div>

                  <div>
                    <label htmlFor="contactSubject">Subject</label>
                    <input
                      type="text"
                      defaultValue=""
                      size="35"
                      id="contactSubject"
                      name="contactSubject"
                      required value={this.state.contactSubject}
                      onChange={this.onSubjectChange.bind(this)}
                    />
                  </div>

                  <div>
                    <label htmlFor="contactMessage">
                      Message <span className="required">*</span>
                    </label>
                    <textarea
                      cols="50"
                      rows="15"
                      id="contactMessage"
                      name="contactMessage"
                      required value={this.state.contactMessage}
                      onChange={this.onMsgChange.bind(this)}
                    ></textarea>
                  </div>
                  <div>
                    <button type='submit'>Submit</button>

                  </div>
                </fieldset>
              </form>
            </div>
          </Slide>
          <Slide right duration={1000}>
            <aside className="four columns footer-widgets">
              <div className="widget widget_contact">
                <h4>Address and Phone</h4>
                <p className="address">
                  {name}
                  <br />
                  {street} <br />
                  {city}, {st} {zip}
                  <br />
                  <span>{phone}</span>
                </p>
              </div>
            </aside>
          </Slide>
        </div>
        
      </section>
    );

  }



  submitEmail(e){
    e.preventDefault();
    axios({
      method: "POST", 
      url:"/send", 
      data:  this.state
    }).then((response)=>{
      if (response.data.status === 'success'){
          alert("Message Sent."); 
          // this.resetForm()
      }else if(response.data.status === 'fail'){
          alert("Message failed to send.")
      }
    })
  };
    resetForm() {
      this.setState({contactName: '', contactEmail: '',contactSubject:'', contactMessage: ''})
    };
}


export default Contact;

服务器.js

const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors');

const app = express();

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}...`);
});

const transporter = nodemailer.createTransport({
    host: "smtp.gmail.com",
    port: 587,
    auth: {
      user: '[e-mail]',
      pass: 'password#!',
    },
  });

  transporter.verify(function(error, success) {
    if (error) {
      console.log(error);
    } else {
      console.log("Server is ready to take our messages");
    }
  });

  app.post('/send', (req, res, next) => {
    var name = req.body.contactName
    var email = req.body.contactEmail
    var subject = req.body.contactSubject
    var message = req.body.contactMessage
  
    var mail = {
      from: name,
      to: '[e-mail]',
      subject: subject,
      text: message
    }
  
    transporter.sendMail(mail, (err, data) => {
      if (err) {
        res.json({
          status: 'fail'
        })
      } else {
        res.json({
         status: 'success'
        })
      }
    })
  });

标签： javascriptnode.jsreactjs