Cómo obtener datos de API en la página web usando axios en reaccionar js,
Esperado :
A través de la llamada GET api, recibo una respuesta en la consola, ahora quiero imprimir los datos de la consola en la página web
import React, { Component } from 'react' import axios from 'axios' // import { data } from 'jquery' 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 PostFormNOTAS:
datos en la consola como datos de matriz (24)
["["/home/fraction/FastAPI/videos/video1.mp4", "/home/fraction/FastAPI/videos/video2.mp4", "/home/fraction/FastAPI/videos/video3.mp4", "/ inicio/fracción/FastAPI/videos/video4.mp4", "/inicio/fracción/FastAPI/videos/video5.mp4"]
Necesita almacenar su respuesta api en algún estado
import React, { Component } from 'react' import axios from 'axios' // import { data } from 'jquery' class PostForm extends Component { constructor(props) { super(props) this.state = { key: '', myVideoUrl: '' } 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) this.setState({ myVideoUrl: response }) }) .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> //im assuming your child component here <MyVideoPlayer url={this.state.myVideoUrl} /> </div></center> ) }} export default PostFormdespués de esto, puede acceder a this.props.url en su componente secundario