Soy nuevo en reaccionar y he escrito un componente funcional para llamar a una API que almacena datos como una matriz que definí llamada Measurments.
Mi problema es que no he podido mostrar los datos de Array en mi interfaz.
¿Alguien puede proporcionar alguna guía sobre cómo poder mostrar esto en mi página web?
Intenté usar la notación:
{ measurement[0].name }
en la declaración de devolución pero no devuelve nada.
También traté de asignarlos a los valores prop (parámetro, unidad, última actualización) en el momento en que la API maneja los datos y eso tampoco funcionó.
parameter = result[i].measurements[0].parameter; unit = result[i].measurements[0].unit; lastUpdated = result[i].measurements[0].lastUpdated;
He adjuntado el contenido completo del archivo para que pueda ver mi lógica. Este archivo se llama CitySelection.js
import axios from 'axios'; import React from 'react'; const measurements = []; const CitySelection = (props) => { var city = props.city; var cityTwo = props.cityTwo; var parameter = props.parameter; var unit = props.unit; var lastUpdated = props.lastUpdated; const Api_call = (city, cityTwo) => { let api = "https://u50g7n0cbj.execute-api.us-east-1.amazonaws.com/v2/latest?limit=100&page=1&offset=0&sort=asc&radius=1000&country_id=US&country=US&city="+city.city+"&city="+cityTwo.cityTwo axios.get(api, { crossdomain: true }) .then(response => { var result = response.data.results // This is where measurments *Array* gets populated if (result != null){ for(let i = 0; i < result.length; i++){ parameter = result[i].measurements[0].parameter; lastUpdated = result[i].measurements[0].lastUpdated; unit = result[i].measurements[0].unit; console.log(unit, parameter, lastUpdated); measurements.push({ "name":result[i].city, "value":result[i].measurements[0].value, "unit":result[i].measurements[0].unit, "parameter":result[i].measurements[0].parameter, "lastUpdated":result[i].measurements[0].lastUpdated }) } } }) } return ( <div> <button onClick={() => Api_call({city},{cityTwo})} >Compare Air Quality </button> <p>{ measurements[0].name }</p> <span>{unit} {parameter} {lastUpdated}</span> <a>{city} has metrics for {parameter}{unit} and this dated was collected: {lastUpdated}</a> </div> ) } export default CitySelection;