• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

104
Vistas
Obtenga datos de la consola API en la página web usando axios

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 PostForm
almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Primero 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>
almost 3 years ago · Juan Pablo Isaza Denunciar

0

<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>
almost 3 years ago · Juan Pablo Isaza Denunciar

0

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 PostForm

agregue 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

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda