联系表格phpmailer和React，确实有效

Question

此联系表存在一些问题：如何解决？

1）加载页面时控制台中的错误：

获取https://lh3.googleusercontent.com/a-/s24-c/AAuE7mAV4aSv5Fjug-nBlgyU2qPsJgg9LPJqlCEt60vZVw 404

2）触发提交按钮时，联系表不会重置

这是服务器PHP代码：

    <?php

require 'vendor/autoload.php';


use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;


$inputJSON = file_get_contents('php://input');
$input = json_decode($inputJSON, TRUE);

$name = $input['name'];
$email = $input['email'];
$message = $input['message'];

$developmentMode = false;
$mailer = new PHPMailer($developmentMode);

   try {
       $mailer->SMTPDebug = 2;
       $mailer->isSMTP(true);

     if ($developmentMode) {
       $mailer->SMTPOptions = [
         'ssl'=>[
           'verify_peer'=>false,
           'verify_peer_name'=>false,
           'allow_self_signed' => true
         ]
       ];
     }

  $mailer->Host ='smtp.gmail.com';
  $mailer->SMTPAuth = true;
  $mailer->Username = 'mailsender@gmail.com';
  $mailer->Password ='xxxxxxxxxxxxxxx';
  $mailer->SMTPSecure='tls';
  $mailer->Port = 587;

  $mailer->setFrom('mailsender@gmail.com','Web-App');
  $mailer->addAddress('reciber@gmail.com','Person whos recibe the email');

  $mailer->isHTML(false);
  $mailer->Subject = 'Consulta';
  $mailer->Body = <<<EOT
    Email: $email
    Name: $name
    Message: $message
EOT;

  $mailer->send();
  $mailer->ClearAllRecipients();
  echo"MENSJE ENVIADO!";

   } catch (\Exception $e) {
     echo"CUACK!" . $mailer->ErrorInfo;
   }

 ?>

这是反应形式：

import React ,{ Component } from 'react';
import Button from '@material-ui/core/Button';
import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';
import axios from 'axios';
import Mapa from './map';

const styles = {
  width: '100%'
}

class Form extends Component {

 constructor(props){
   super(props)
   this.state = {
     formData:{
       name:'',
       email:'',
       subject:'',
       message:''
     },
     submitted: false
   }
       this.handleSubmit=this.handleSubmit.bind(this)
       this.handleChange=this.handleChange.bind(this)
 }

  handleChange(e){
     const { formData } = this.state;
     formData[e.target.name]=e.target.value;
      this.setState({formData});
  }

 handleSubmit(e){
   e.preventDefault()
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const message = document.getElementById('message').value;
      const subject = document.getElementById('subject').value;


   axios({
    method:"POST",
    url:'./server/index.php', //aca va la url del archivo php
    data: {
            name: name,
            email: email,
            message: message,
            subject:subject
         }

   }).then((response) => {
         response.info ? alert("Lo sentimos el mensaje no pudo ser enviado") : alert("El mensaje fué enviado con exito")
        })
        this.resetForm()
   this.setState({submitted:true})
 }

 resetForm(){
   document.getElementById('contact-form').reset();
 }

  render(){
    const { formData, submitted } = this.state;
    return(
      <div>
      <div>
      <ValidatorForm
              id="contact-form"
              ref="form"
              onSubmit={this.handleSubmit}
          >
                <TextValidator
                    style={styles}
                    id="name"
                    label="Nombre Completo"
                    onChange={this.handleChange}
                    name="name"
                    value={formData.name}
                    validators={['required']}
                    errorMessages={['Por favor ingresá tu nombre completo']}
                />
                <br />
                <TextValidator
                      style={styles}
                      id="email"
                      label="Email"
                      onChange={this.handleChange}
                      name="email"
                      value={formData.email}
                      validators={['required', 'isEmail']}
                      errorMessages={['Por favor ingresá tu direccion de E-mail', 'El email no es valido']}
                />
                <br />
                <TextValidator
                    style={styles}
                    id="subject"
                    label="Asunto"
                    onChange={this.handleChange}
                    name="subject"
                    value={formData.subject}
                    validators={['required']}
                    errorMessages={['Por favor ingresá el motivo de tu consulta']}
                />
                <br />
                <TextValidator
                    style={styles}
                    id="message"
                    label="Mensaje"
                    onChange={this.handleChange}
                    name="message"
                    value={formData.message}
                    validators={['required']}
                    errorMessages={['Escribi tu consulta']}
                />
                <br /><br />
                <Button
                   raised="true"
                   type="submit"
                   disabled={submitted}
                >
                {
                    (submitted && 'Tu consulta fue enviada!')
                    || (!submitted && 'Enviar')
                }
                </Button>
            </ValidatorForm>
      </div>

            <Mapa />
            </div>
    )
  }
}

export default Form;

谢谢！