Ich kann nicht reagieren Formular

Question

Hallo Ich versuche, einfachen Kontakt von in reagieren, aber ich hielt auf fetch() -Methode. Das ist mein Code. Ich habe keine Ahnung, was falsch ist.

FrontEnd

export default class ContactForm extends React.Component<IContactFormProps, any> { 

    constructor(props) { 
    super(props); 
    // local state 
    this.state = { 
     tl: new TimelineMax({paused: true, delay: 1}), 
     name: "", 
     email: "", 
     subject: "", 
     message: "", 
     sent: false, 
    } 
    this.handleOnSubmit = this.handleOnSubmit.bind(this); 
    this.handleClearForm = this.handleClearForm.bind(this); 
    this.handleChange = this.handleChange.bind(this); 
    this.startAnimation = this.startAnimation.bind(this); 
    } 

    handleOnSubmit(e) { 
    console.log("ContactForm->handleOnSubmit(e)."); 
    e.preventDefault(); 

    let formData = new FormData(); 
    formData.append(name, this.state.name); 
    console.log("formData: " + formData); 

    fetch('/contact', { 
     method: 'POST', 
     body: formData 
    }) 
    .then((response) => { 
     console.log("response: " + response); 
     console.log("response.ok: " + response.ok); 
     return response.json(); 
    }) 
    .then((responseJson) => { 
     console.log("responseJson: " + responseJson); 
    }) 
    .catch((error) => { 
     console.log("error from fetch: " + error); 
    }); 

    } 

    handleClearForm(e) { 
    console.log("ContactForm->handleClearForm(e)."); 
    // e.preventDefault(); 
    } 

    handleChange(event) { 
    const target = event.target; 
    const name = event.target.name; 
    const value = event.target.value; 

    this.setState({ 
     [name]: value 
    }); 
    // console.log("event.target.value: " + event.target.value); 
    // this.setState({value: event.target.value}); 
    } 

    startAnimation() { 
    console.log("ContactForm->startAnimation()."); 
    } 

    componentDidMount() { 
    this.startAnimation(); 
    } 

    componentWillUnmount() { 

    } 

    render() { 
    return (
     <form className="contact-form-cnt" 
      onSubmit={ this.handleOnSubmit }> 
      <div className="top-row"> 
      <input type="text" name="name" placeholder="Name" 
       className="name" ref="name" 
       value={this.state.name} onChange={this.handleChange}/> 
      <input type="text" name="email" placeholder="Em@il" 
       className="email" ref="email" 
       value={this.state.email} onChange={this.handleChange}/> 
      </div> 
      <input type="text" name="subject" placeholder="Subject" 
      className="subject" ref="subject" 
      value={this.state.subject} onChange={this.handleChange}/> 
      <textarea name="message" placeholder="Write Your message here." 
      className="message" ref="message" 
      value={this.state.message} onChange={this.handleChange}></textarea> 
      <button type="submit" name="submit" 
      className="submit" ref="Send" 
      onClick={ this.handleClearForm }>Send</button> 
     </form> 
    ); 

    }; 
}; 

BackEnd

'use strict'; 

const path = require('path'); 
const express = require('express'); 
const bodyParser = require('body-parser'); 
const winston = require('winston'); 

const distPath = path.join(__dirname, '../dist'); 
const indexFileName = 'index.html'; 
const app = express(); 
const PORT = process.env.PORT || 8080; 

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

app.use(express.static(distPath)); 
app.get('*', (req, res) => res.sendFile(path.join(distPath, indexFileName))); 

app.post("/contact", (req, res) => { 
    try { 
     console.log("mail sending succes!"); 
    } 
    catch (error) { 
     console.log("mail sending failure!"); 
    } 
}); 

app.listen(PORT, (err) => { 
    if (err) { 
     winston.error(err); 
     return; 
    } 

    winston.info(`Listening on port ${PORT}`); 
}); 

URL:

http://localhost:8080/contact

und Fehler

POST http://localhost:8080/contact 404 (nicht gefunden)

Ich denke, es ist etwas, mit URL, aber Ich bin aus Ideen. Irgendwelche Vorschläge?

Answer 1

versuchen, etwas wie folgt aus:

app.post("/contact", (req, res) => { 
    res.json({"foo": "bar"}); 
}); 

diese Weise können Sie ein JSON-Objekt als Ergebnis setzen. Lass es mich wissen, wenn es funktioniert.