Quiero hacer una llamada api con Instagram api usando Axios/Reactjs. Ya tengo datos, pero tengo un problema de renderizado. No sé dónde cometí un error, pero no puedo renderizar el título o la imagen de la publicación de instagram. Gracias por la ayuda.
import React,{Component} from 'react' import '../styles/home.css' import '../App.css'; import axios from 'axios'; const api = axios.create({ baseURL:`https://graph.instagram.com/me/media?fields=id,caption,media_url&access_token=IGQ.....` }) class Home extends Component { state={ courses: [] } constructor(){ super(); api.get('/').then(res=>{ console.log(res.data) this.setState({courses: res.data}) }) } createCourse = async()=> { let res = await api.post('/', {title:"Test", id:4 ,autor:'Test'}) console.log(res); } render() { return <div> {this.state.courses.map(course => <h2 key={course.id}>{course.caption}</h2> )} <h1>Hello</h1> </div> } } export default Home; //Debe buscar datos en el método componentDidMount.
componentDidMount() { api.get('/').then(res => { console.log(res.data) this.setState({courses: res.data}) }) }Está intentando mostrar los datos antes de que se completara la recuperación.
Cambia tu <div> de esto:
<div> {this.state.courses.map(course => <h2 key={course.id}>{course.caption} </h2>)} <h1>Hello</h1> </div>A esto:
<div> {this.state.courses && this.state.courses.map(course => <h2 key={course.id}>{course.caption} </h2>)} <h1>Hello</h1> </div>Por lo tanto, solo se procesa cuando los datos no son nulos.
-Esto sucede debido a la recuperación antes del montaje, por lo que para solucionarlo, implemente el método componentDidMount().