Estoy tratando de enviar una solicitud POST usando axios con ReactJS, mi solicitud POST se enviará cuando presione el botón, pero los datos del cuadro de texto no están presentes. Esperando que alguien pudiera señalar lo que he hecho mal. Creo que podría estar yendo mal con la configuración del estado.
import React, { Component } from "react"; import axios from "axios"; class SearchBar extends Component { state = { search: '', }; handleChange = event =>{ this.setState({ search: event.target.value}); } handleSubmit = event => { event.preventDefault(); const data = { search: this.state.search } axios .post("http://127.0.0.1:8080/find", {data}) .then(response=>{ console.log(response); this.setState({ data: response.data }); }) .catch((error) => { console.log(error); }); }; render() { return ( <div className="post"> <form className="post" onSubmit={this.handleSubmit}> <input placeholder="Search for music 'Artist - Track'" type="text" name="name" onChange={this.handleChange}/> <button type="submit">Search</button> </form> <div> {this.state.data} </div> </div> ); } } export default SearchBar;data ya es un objeto que definiste y lo envolviste en otro objeto. Entonces, para obtener su respuesta, tendrá que hacer response.data.data
Para solucionar esto, todo lo que necesita hacer es eliminar las llaves alrededor de los datos en su llamada axios
axios .post("http://127.0.0.1:8080/find", data) //removed braces around data .then(response=>{ console.log(response); this.setState({ data: response.data }); }) .catch((error) => { console.log(error); });