He escrito un formulario simple que envía una solicitud posterior con datos al servidor. Al hacer clic en el botón Enviar, quiero borrar el formulario, así que creo una función que actualiza la página. La función funciona correctamente, pero ahora los datos no se envían al servidor.
import React, {Component} from "react"; import axios from "axios"; class PostForm extends Component { constructor(props) { super(props); this.state = { id: '', name: '', surname: '', country: '' } } changeHandler = e => { this.setState({[e.target.name]: e.target.value}); } clearFunc = () => { window.location.reload(false); } submitHandler = e => { e.preventDefault(); console.log(this.state); axios.post('http://localhost:8080/human/add/', this.state) .then(response => { console.log(response) }) .catch(error => { console.log(error) }); } render() { const {id, name, surname, country} = this.state; return ( <div> <form id="input-form" onSubmit={() => { this.submitHandler(); this.clearFunc() }}> <div> <input type="number" name="id" value={id} onChange={this.changeHandler}/> </div> <div> <input type="text" name="name" value={name} onChange={this.changeHandler}/> </div> <div> <input type="text" name="surname" value={surname} onChange={this.changeHandler}/> </div> <div> <input type="text" name="country" value={country} onChange={this.changeHandler}/> </div> <button type="submit">Submit</button> </form> </div> ) } } export default PostForm;Movería esta línea this.clearFunc() dentro de submitHandler , en then bloque, así:
submitHandler = (e) => { e.preventDefault(); console.log(this.state); axios .post("http://localhost:8080/human/add/", this.state) .then((response) => { console.log(response); this.clearFunc(); }) .catch((error) => { console.log(error); }); };Además, si es solo para vaciar el formulario, no es necesario actualizar la página, simplemente puede hacerlo:
clearFunc = () => { this.setState({ id: "", name: "", surname: "", country: "", }); };Parece que lo hiciste en el flujo equivocado. Si desea borrar el formulario después de enviarlo, principalmente en la aplicación React, solo necesita establecer todos los estados en una cadena vacía después de que el POST haya tenido éxito (lo que significa que lo colocaremos dentro entonces()).
Se vería algo como esto:
clearForm = () => { // use this to reset the states this.setState({ id: '', name: '', surname: '', country: '' }) } submitHandler = e => { e.preventDefault(); console.log(this.state); axios.post('http://localhost:8080/human/add/', this.state) .then(response => { console.log(response) clearForm() // <-- call the function here }) .catch(error => { console.log(error) }); }¿Por qué no debería poner clearForm() dentro del formulario onSubmit? Porque nunca sabemos que la solicitud POST tendrá éxito o no. Es una buena idea mantener los valores si la solicitud POST tiene una respuesta de error.
No creo que necesite actualizar la página, siempre que use e.preventDefault() , está deteniendo el comportamiento predeterminado de actualizar la página mediante el formulario.
si todo lo que desea es vaciar el formulario, puede usar document.form.reset() donde formulario es el nombre que le ha asignado.