error input form data ke db mysql dengan reactjs

Permisi gan,numpang nanya nih saya tuh mau masukin data seputar pesan feedback klien di website saya ke db mysql dengan reactjs,expressjs,dan sequelize.Dan ketika input pun sudah berhasil datanya dimasukan.

question1.pngTapi kok kalo cuman satu kali input kok tiba2 malah ke input banyak gitu yah?Ada yang tau?kalo ada yang tau tolong bantuin soalnya masih newbie hehe.Kalo ada yang kurang jelas boleh ditanyain dan kode2 dibawah ini ada kaitannya sama pertanyaan diatas.

Contact.js

import React,{Component} from "react";
import Header from "../Components/Header";
import Footer from "../Components/Footer";
import instagram from "../Components/img/instagram.png";
import facebook from "../Components/img/facebook.png";
import twitter from "../Components/img/twitter.png";

class Contact extends Component{
    constructor(props){
        super(props)
        this.state = {
            nama_kontak : "",
            email : "",
            pesan : ""
        }
    }

    componentDidMount(){
        this.postMessageClient();
    }

    handleChange = (e) => {
        this.setState({
            [e.target.name] : e.target.value
        })
    }

    postMessageClient = () => {
        let data = {
            nama_kontak : this.state.nama_kontak,
            email   : this.state.email,
            pesan   : this.state.pesan
        };

        fetch("http://localhost:4000/pesan/kirim",{
            method : "POST",
            body : JSON.stringify(data),
            headers : {
                "Content-type" : "application/json"
            }
        })
        .then( data => console.log(data))
        .catch(err => console.log(err));
    }

    render(){
        return(
            <section>
                <Header />
                <div id="descript-contact">
                    <h3>Silahkan hubungi kami</h3>
                    <p>
                        Bila anda memiliki ulasan berupa pujian,saran maupun keluhan
                        seputar layanan maupun fasilitas
                        yang diberikan kami,Silahkan hubungi kontak kami.
                    </p>
                </div>
                <div id="contact">
                    <p>{this.state.nama_kontak}</p>
                    <p>{this.state.email}</p>
                    <form onSubmit={this.postMessageClient}>
                        <label>Nama : </label><br />
                        <input type="text" name="nama_kontak" onChange={this.handleChange}/><br />
                        <label>email anda : </label><br />
                        <input type="email" name="email" onChange={this.handleChange} placeholder="Contoh:example@gmail.com" />
                        <br/>
                        <label>Pesan : </label><br />
                        <textarea cols="40" rows="5" name="pesan" onChange={this.handleChange} placeholder="Silahkan isi pesan anda disini"></textarea><br />
                        <button type="submit">Kirim</button>
                    </form>
                </div>
                <div id="big-horizontal-border" />
                <div class="menu-contact">
                    <ul>
                        <h3>Atau silahkan hubungi kontak di bawah ini</h3>
                        <li><p>Tel: +622282602020</p></li>
                        <li><p>Faks: (+62)22/82601896</p></li>
                        <li><p>Email kontak : H9397-RE@accor.com</p></li>
                    </ul>
                    <div id="menu-sosmed">
                        <h3>Follow our social media</h3>
                        <a href="https://www.instagram.com/ibisbandungpasteur/"><img src={instagram} className="" alt="" /></a>
                        <a href="https://web.facebook.com/ibisBandungPasteur/"><img src={facebook} className="" alt="" /></a>
                        <a href="https://twitter.com/ibisBDGpasteur"><img src={twitter} className="" alt="" /></a>
                    </div>
                </div>
            <Footer />
        </section>
        );
    }
}

export default Contact;

pesan_klien.js

let express = require('express');
let router =express.Router();
let models = require('../models');
let pesan_klien = models.pesan_klien;

//tampilkan data pesan masuk
router.get('/',(req,res,next) => {

    pesan_klien.findAll({})
    .then(data => {
        res.render('data_inbox',{
            results : data
        })
    })
    .catch(err =>{
        res.json({
            'err' : err.message
        })
    });
})

//Kirim pesan feedback klien dari web klien
router.post('/kirim',(req,res) => {
    const pesan = {
        nama_kontak : req.body.nama_kontak,
        email   : req.body.email,
        pesan   : req.body.pesan
    };

    pesan_klien.create(pesan)
    .then(data => res.send(data))
    .catch( err => {
        res.status(500).send({
            'message' : err.message
        });
    });
});

//hapus item
router.post('/hapus/:id',(req,res) => {
    const id = req.params.id;

    pesan_klien.destroy({
        where : {id : id}
    })
    .then(num => {
        if(num === 1){
            res.redirect('/pesan');
        }
        else{
        res.send({
            message: `Cannot delete Tutorial with id=${id}. Maybe Tutorial was not found!`
        });
        }
    })
    .catch( err => {
        res.status.send({
            "message " : err.message
        });
    });
})

module.exports = router;
avatar nogi
@nogi

21 Kontribusi 2 Poin

Dipost 3 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban