Creé un selector de fecha simple reaccionar js, luego llamo a la API y obtengo algunos datos de la API en la consola, ahora quiero obtener datos de la API en la página web.
Aquí está el código que usé para llamar a la función API, quiero datos de respuesta del mapa en una página web
import React, { Component } from 'react' import axios from 'axios' class PostForm extends Component { constructor(props) { super(props) this.state = { key: '', } console.log(this.state) } changeHandler = e => { this.setState({ [e.target.name]: e.target.value }) } submitHandler = e => { e.preventDefault() axios .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) } render() { const { key } = this.state return ( <center><div> <form onSubmit={this.submitHandler}> <div> <h2> DATE PICKER</h2><br></br> <input type="text" name="key" value={key} onChange={this.changeHandler} /> </div> <br></br> <button type="submit">Submit</button> </form> </div></center> ) } } export default PostFormPrimero debe guardar los datos en algún lugar dentro de la aplicación. Cree un estado y use setState para actualizarlo. Ahora que tiene los datos más recientes, puede usar la magia de JSX para mostrarlos usando map . Ejemplo:
<div> {this.state.data.map((dataObjectToDisplay) => { return ( <div> {/* Include your data in a way you want here, you can also replace the div with any other element (li) */} </div> ); })} </div><div> {this.state.data.map((dataObjectToDisplay) => { return ( <div> {/* Include your data in a way you want here, you can also replace the div with any other element (li) */} </div> ); })} </div>Aquí está la explicación de este problema que puede consultar aquí,
import React, { Component } from 'react' import axios from 'axios' class PostForm extends Component { constructor(props) { super(props) this.state = { key: '', // Where data will be saved. data: [], } console.log(this.state) } changeHandler = e => { this.setState({ [e.target.name]: e.target.value }) } submitHandler = e => { e.preventDefault() axios .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`) .then(response => { // Updating the state to trigger a re-render this.setState({data: response.data}); console.log(response.data) }) .catch(error => { console.log(error) }) } render() { const { key } = this.state return ( <center><div> <form onSubmit={this.submitHandler}> <div> <h2> DATE PICKER</h2><br></br> <input type="text" name="key" value={key} onChange={this.changeHandler} /> </div> <br></br> <button type="submit">Submit</button> </form> <div> {this.state.data.map((dataObjectToDisplay) => { return ( <div> { <ol>{this.state.data}</ol> } </div> ); })} </div> </div></center> ) } } export default PostFormagregue un estado (agregue una propiedad de objeto a this.state) y dentro del controlador de envío, después de obtener la respuesta en Axios, use setState({[name of state]: response.data }).
Eso se encarga de actualizar el estado. En cuanto a dónde mostrarlos, depende de usted.
Puede copiar el código en cualquier lugar dentro del método de renderizado. Si desea mostrarlo debajo del formulario, péguelo dentro del contenedor div después del formulario.
Para un mejor control del estado, puede verificar una de las herramientas de administración de estado como redux o simplemente usar el contexto global e implementar el enrutamiento usando el enrutador de reacción:
Créditos a @MrCeRaYA