Estou tentando pegar dados de um formulário, porém o meu req.body retorna sempre vazio
import express from "express";
import * as httpStatus from 'http-status';
import bodyParser, { json } from "body-parser";
import cors from 'cors';
import mail from "./services/mail";
class App {
public app: express.Application;
enableCors(){
const options: cors.CorsOptions = {
methods: "GET,OPTIONS,PUT,POST,DELETE",
origin: "*"
};
this.app.use(cors(options));
}
constructor() {
this.app = express();
this.enableCors();
this.app.use(bodyParser.urlencoded({extended: true}));
this.routes();
}
routes() {
this.app.route("/contato").get((req, res) => {
res.send({ 'result': 'version 0.0.2' })
});
this.app.post("/contato", (req, res) => {
const message = Object.assign({}, req.body);
let nome = req.body;
console.log(nome);
mail.to = '';
mail.subject = message.subject;
mail.message = message.message;
let result = mail.sendMail();
res.status(200).json({ 'result': result })
});
}
}
export default new App();
No react tenho o seguinte código:
export default function Contato() {
const (nome, setNome) = useState('');
const (sobrenome, setSobrenome) = useState('');
const (contato, setContato) = useState('');
const (cidadeEstado, setCidadeEstado) = useState('');
const (email, setEmail) = useState('');
const (assunto, setAssunto) = useState('');
const (mensagem, setMensagem) = useState('');
async function tratarFomulario(event: FormEvent) {
event.preventDefault();
const data = new FormData();
data.append('nome', nome);
data.append('sobrenome', sobrenome);
data.append('contato', contato);
data.append('cidadeEstado', cidadeEstado);
data.append('email', email);
data.append('assunto', assunto);
data.append('mensagem', mensagem);
await api.post('contato', data)
alert('email enviado');
console.log(
nome,
sobrenome,
contato,
cidadeEstado,
email,
assunto,
mensagem
);
}
return (
<div className="global">
<div className="container-global">
<form className="mt-5" onSubmit={tratarFomulario}>
<div className="container mb-5">
<div className="row row-align">
<h2 className="h-contato">ENTRE EM CONTATO</h2>
</div>
</div>
<div className="container mt-2">
<div className="col row justify-content-center">
<div id="endereco" className="col-6">
<div className="row row-align">
<p>
Rod Rs 453, Rota do Sol, Km 90,5 <br />
B. São Roque - Garibaldi (RS)
</p>
</div>
<div className="row mt-4 row-align">
<p className="mr-2"><FontAwesomeIcon icon={faWhatsappSquare} size="2x" /></p>
<p>(054) 99953-0114</p>
</div>
<div className="row mt-4 row-align">
<p>lafabbricamoveis@yahoo.com</p>
</div>
<div className="row row-align mb-5">
<div className="mr-3">
<FontAwesomeIcon icon={faFacebookSquare} className="icon"/>
</div>
<div className="mr-3">
<FontAwesomeIcon icon={faInstagramSquare} className="icon"/>
</div>
<div>
<FontAwesomeIcon icon={faWhatsappSquare} className="icon"/>
</div>
</div>
</div>
<div id="contato" className="col-6 row reverse">
<div className="form-row">
<div className="form-group col-md-6 col-align-center">
<label htmlFor="inputNome"></label>
<input type="text" className="form-button" name="nome" id="inputNome" placeholder="Nome" onChange={event => setNome(event.target.value)}/>
</div>
<div className="form-group col-md-6 col-align-center">
<label htmlFor="inputSobrenome"></label>
<input type="text" className="form-button" id="inputSobrenome" placeholder="Sobrenome" onChange={event => setSobrenome(event.target.value)}/>
</div>
</div>