发送表单刷新页面而不发布到 MongoDb 数据库答案

【问题标题】：Sending a form refreshes page and not posting to MongoDb Database发送表单刷新页面而不发布到 MongoDb 数据库
【发布时间】：2020-07-10 08:58:24
【问题描述】：

问题 1： 在表单的 index.jsx 文件中最后一个 Else 语句之后没有显示内容，修复它会删除最后一个 Else 语句，但这会导致另一个问题。

问题2：在邮件表单中按下发送按钮后，页面刷新，但数据库中没有显示任何内容，也没有显示邮件成功发送的消息。

我希望有人可以帮助我。 控制台中没有错误消息

这是所有文件： index.jsx(邮件)：

import React, { Component } from "react";
import * as mailActions from "../../store/actions/mail";
import { connect } from "react-redux";
import Loader from "../Loader";
import TextField from "@material-ui/core/TextField";
import SendIcon from "@material-ui/icons/Send";
import AddIcon from "@material-ui/icons/Add";
import "./style.css";

class CreateMail extends Component {
  state = {
    createMail: false,
  };

  createMailHandler = () => {
    this.setState((prevState) => {
      return {
        createMail: !prevState.createMail,
      };
    });
  };
  render() {
    let content;

    if (this.props.loading) {
      content = <Loader />;
    } else if (this.props.error) {
      content = (
        <div>
          {this.props.errorMessages.map((error, i) => (
            <p key={i}>{error}</p>
          ))}
        </div>
      );
    } else if (this.props.mailSent) {
      content = <p>Mail sent successfully!</p>;
    } else {
      content = (
        <form className="createMailForm">
          <div className="formControl">
            <TextField
              id="receiver"
              label="Receiver"
              type="text"
              name="receiver"
              placeholder="Username of receiver"
            />
          </div>
          <div className="formControl">
            <TextField
              label="Subject"
              type="text"
              name="subject"
              placeholder="Subject"
              id="subject"
            />
          </div>
          <div className="formControl">
            <TextField id="body" label="Body of the Mail" multiline rows={6} />
          </div>
          <button className="createMailSendBtn">
            <SendIcon />
          </button>
        </form>
      );
    }
    return (
      <>
        <div className="createMailContainer" onClick={this.createMailHandler}>
          <button className="createMailCreateBtn">
            <AddIcon
              className={`${
                this.state.createMail ? "createMailCreateBtn--close" : ""
              }`}
            />
          </button>
        </div>
        <div
          className={`createMailFormContainer ${
            this.state.createMail
              ? "formContainer--visible"
              : "formContainer--hidden"
          }`}
        >
          {content}
        </div>
      </>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    ...state.mail,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    mailInit: (mailObj) => dispatch(mailActions.mailInit(mailObj)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(CreateMail);

【问题讨论】：

标签： javascript node.js reactjs express redux

【解决方案1】：

你的问题2是因为这个：

<form className="createMailForm">

您必须在此处传递一个提交处理程序方法，并且该方法必须保存表单提交，例如：

<form className="createMailForm" onSubmit={this.submitHandler}>

和

submitHandler = (e) => {
  e.preventDefault();
  // Now perform your action here like make api call or call some action etc
}

【讨论】：