0
255
Vistas¿Cómo configurar la matriz JSON para indicar en React?
Tengo este siguiente código de App.js:
import React, { Component } from 'react'; import axios from 'axios' class Axios extends Component { constructor() { super(); this.state = { item : '', } } componentDidMount() { axios.get('https://restcountries.com/v3.1/capital/lima') .then( response => { const data = response.data.map(( data )=>{ this.setState({ item : data }); }); }) .catch( error => { alert( error ); }); } prepare() { console.log( this.state.item ); } render() { return ( <div>{this.prepare()}</div> ) } } export default Axios; Mi objetivo es obtener el nombre común de esta API: https://restcountries.com/v3.1/capital/lima
Ahora, en el método componentDidMount() , necesito configurar los datos de retorno de la API en el estado del item para poder recorrerlos usando el método de prepare .
Pero no tengo idea de cómo configurar los datos JSON de la matriz de devolución de la API al estado del item .
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Solo tiene que hacer asing response.data al item como:
Demo en vivo
componentDidMount() { axios .get("https://restcountries.com/v3.1/capital/lima") .then((response) => { this.setState({ item: response.data }) }) .catch((error) => { alert(error); }); }
·
Juan Pablo Isaza
Denunciar
0
Actualice su state.item a una matriz en blanco.
constructor() { super(); this.state = { item : [], } } En componentDidMount() , actualice el código para aceptar la response :
componentDidMount() { axios.get('https://restcountries.com/v3.1/capital/lima') .then( response => { this.setState({ item : response.data }); }) .catch( error => { alert( error ); }); } En render() , puede usar el mapa en state.item y puede hacer un bucle en él.
render() { return ( <div>{this.state.item.map(data,index)=>( //some UI mapping to each `data` in `item` array )}</div> ) }
·
Juan Pablo Isaza
Denunciar
0
Deberías comprobar esto.
import React, { Component } from "react"; import axios from "axios"; class Axios extends Component { constructor() { super(); this.state = { item: [] }; } componentDidMount() { axios .get("https://restcountries.com/v3.1/capital/lima") .then((response) => { this.setState({ item: response && response.data }); }) .catch((error) => { alert(error); }); } prepare() { return <div>{console.log("Item", this.state.item)}</div>; } render() { return <div>{this.prepare()}</div>; } } export default Axios;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta