Javascript 发送表单会刷新页面，而不会发布到MongoDb数据库

问题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);

import React，{Component}来自“React”；
将*作为邮件操作从“../../store/actions/mail”导入；
从“react redux”导入{connect}；
从“./Loader”导入加载程序；
从“@material ui/core/TextField”导入TextField；
从“@material ui/icons/Send”导入SendIcon；
从“@material ui/icons/Add”导入AddIcon；
导入“/style.css”；
类CreateMail扩展组件{
状态={
createMail:false，
};
createMailHandler=（）=>{
this.setState（（prevState）=>{
返回{
createMail:！prevState.createMail，
};
});
};
render（）{
让内容；
如果（本道具装载）{
内容=；
}else if（this.props.error）{
内容=(
{this.props.errorMessages.map（（error，i）=>(
{error}
))}
);
}else if（this.props.mailssent）{
内容=邮件成功发送！
；
}否则{
内容=(
);
}
返回(
{content}
);
}
}
常量mapStateToProps=（状态）=>{
返回{
…state.mail，
};
};
const mapDispatchToProps=（调度）=>{
返回{
mailInit：（mailObj）=>dispatch（mailActions.mailInit（mailObj）），
};
};
导出默认连接（mapStateToProps、mapDispatchToProps）（CreateMail）；

您的问题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
}