Estoy teniendo un problemón en un proyecto, he buscado y leído en todos los sitios posibles y no he encontrado solución y ya hasta me da dolores de cabeza.
Estoy intentando consumir una api local con Reactjs, la api funciona correctamente ya la he probado con Postman, pero al momento de tomar los datos del formulario y mandarlos a través de la api me da un error 500 y al revisar en la consola de node me indica que mongo requiere los datos que intenté enviarle(normal porque en el schema lo definí con required:true) , lo cual me da a entender que no los recibe realmente, pero al hacer un console.log a mi state en React toma los datos correctamente, no lo entiendo.
Les paso mi código en React,
class AgentForm extends Component {
constructor() {
super();
this.state = {
firstName: '',
lastName: '',
email: '',
password: '',
phone: '',
agentType: '',
};
this.handleChange = this.handleChange.bind(this);
this.addAgent = this.addAgent.bind(this);
}
addAgent(e) {
console.log(this.state)
fetch('http://localhost:3000/agents', {
method: 'POST',
body: JSON.stringify(this.state),
headers: {
'Accept': 'application/json',
'Content_Type': 'application/json',
},
})
.then((res) => console.log(res))
.catch((err) => console.log(err));
e.preventDefault();
}
handleChange(e) {
const { name, value } = e.target;
this.setState({
[name]: value,
});
}
Y aquí mi render:
render() {
return (
<>
<div className="container">
<div className="card grey lighten-5">
<div className="row">
<form className="col s12" onSubmit={this.addAgent}>
<div className="row">
{/* Input Nombre */}
<div className="input-field col s6">
<i className="material-icons prefix">
account_circle
</i>
<input
onChange={this.handleChange}
name="firstName"
id="firstName"
type="text"
className="validate"
/>
<label htmlFor="firstName">First Name</label>
</div>
{/* Input Apellido */}
<div className="input-field col s6">
<i className="material-icons prefix">
account_circle
</i>
<input
onChange={this.handleChange}
name="lastName"
id="lastName"
type="text"
className="validate"
/>
<label htmlFor="lastName">Last Name</label>
</div>
{/* Input Email */}
<div className="input-field col s6">
<i className="material-icons prefix">email</i>
<input
onChange={this.handleChange}
name="email"
type="email"
className="validate"
/>
<label htmlFor="email">Email</label>
</div>
{/* Input Password */}
<div className="input-field col s6">
<i className="material-icons prefix">lock</i>
<input
onChange={this.handleChange}
name="password"
id="password"
type="password"
className="validate"
/>
<label htmlFor="password">Password</label>
</div>
{/* Input Phone Number */}
<div className="input-field col s6">
<i className="material-icons prefix">phone</i>
<input
onChange={this.handleChange}
name="phone"
id="phone"
type="number"
className="validate"
/>
<label htmlFor="phone">Phone</label>
</div>
{/* Input Select */}
<div className="input-field col s6">
<select
name="agentType"
onChange={this.handleChange}
className="browser-default"
id="agentType"
defaultValue="support_agent"
>
<option value="support_agent">
Support Agent
</option>
<option value="technical_agent">
Technical Agent
</option>
</select>
</div>
<div className="col s12 center">
<button
className="btn red darken-2"
type="submit"
>
Registrar
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</>
);
}
}
La verdad que todo funciona excepto el mandar los datos desde el formulario a mongo con la api.
Cualquier indicación por más sencilla que parezca puede servir porque la verdad he probado todo lo que conozco y algunas cosas que desconozco también.
PD: Soy nuevo en mern y también en StackOverFlow así que pido disculpa de ante mano si obvié algún detalle. Gracias