Tengo algunos problemas con un proyecto. Quiero mostrar algunos datos, que recupero de una API, en un menú desplegable. Utilicé la función .map() y jsx para mostrar todo, pero nada funciona, el menú desplegable permanece vacío mientras que un archivo console.log (ciudades) me muestra que mi matriz está llena.
function CitiesList(){ var cities = citiesRequest(); return ( <form id="cityChoice"> <label for="citySelected">Ville : </label> <select name="citiesList" id="citySelected"> {cities.map((city) => <option key={city} value={city}>{city}</option>)} </select> </form> ); }Si cambio la forma en que se llenan las "ciudades" para la prueba, todo funciona y el menú desplegable se llena:
function CitiesList(){ var cities = ["Berlin", "Paris", "London"]; return ( <form id="cityChoice"> <label for="citySelected">Ville : </label> <select name="citiesList" id="citySelected"> {cities.map((city) => <option key={city} value={city}>{city}</option>)} </select> </form> ); }Aquí está todo mi código si eso puede ayudar:
function Header(props){ return( <header> <h1 className="apiTitle">{props.name}</h1> <CitiesList/> </header> ); } function CitiesList(){ var cities = citiesRequest(); return ( <form id="cityChoice"> <label for="citySelected">Ville : </label> <select name="citiesList" id="citySelected"> {cities.map((city) => <option key={city} value={city}>{city}</option>)} </select> </form> ); } ReactDOM.render( <Header name="Bike Mapper"/>, document.getElementById('root') ); function citiesRequest(){ var citiesArray = []; fetch("https://api.jcdecaux.com/vls/v3/contracts?apiKey="+APIKEY) .then((response) => response.json()) .then(function(data){ data.forEach(element => { if(element.country_code == 'FR'){ citiesArray.push(element.name.toUpperCase()); } }); }) return citiesArray; }Gracias
Su matriz de ciudades siempre está vacía porque no está esperando que la API envíe la respuesta. Para lograr esto puedes usar Promises
function Header(props){ return( <header> <h1 className="apiTitle">{props.name}</h1> <CitiesList/> </header> ); } async function CitiesList(){ var cities = await citiesRequest(); return ( <form id="cityChoice"> <label for="citySelected">Ville : </label> <select name="citiesList" id="citySelected"> {cities.map((city) => <option key={city} value={city}>{city}</option>)} </select> </form> ); } ReactDOM.render( <Header name="Bike Mapper"/>, document.getElementById('root') ); async function citiesRequest(){ return new Promise((resolve,reject)=>{ var citiesArray = []; fetch("https://api.jcdecaux.com/vls/v3/contracts?apiKey="+APIKEY) .then((response) => response.json()) .then(function(data){ data.forEach(element => { if(element.country_code == 'FR'){ citiesArray.push(element.name.toUpperCase()); } }); resolve(citiesArray); }) }) }Usando ganchos
import React, { useState, useEffect } from 'react'; function Header(props){ const [cities, setCities] = useState([]) useEffect(()=>{ citiesRequest().then(data=>{ setCities(data) }); },[]) return( <header> <h1 className="apiTitle">{props.name}</h1> <form id="cityChoice"> <label for="citySelected">Ville : </label> <select name="citiesList" id="citySelected"> {cities.map((city) => <option key={city} value={city}>{city} </option>)} </select> </form> </header> ); } ReactDOM.render( <Header name="Bike Mapper"/>, document.getElementById('root') ); async function citiesRequest(){ return new Promise((resolve,reject)=>{ var citiesArray = []; fetch("https://api.jcdecaux.com/vls/v3/contracts?apiKey="+APIKEY) .then((response) => response.json()) .then(function(data){ data.forEach(element => { if(element.country_code == 'FR'){ citiesArray.push(element.name.toUpperCase()); } }); resolve(citiesArray); }) }) }Creo que el problema es que en el momento en que se devuelven los datos de su función citiesRequest , el componente ya se ha renderizado y no tiene ninguna indicación de que deba volver a renderizarse.
Puedes intentar:
citiesRequest para devolver los datos directamenteuseEffect (con una matriz de dependencia vacía, para llamarlo solo una vez cuando el componente se monte) en su componentesetCities ).Cuando cambia el estado, React sabrá que debe volver a renderizarse.
function CitiesList(){ const [cities, setCities] = useState([]); useEffect(() => { const getData = async () => { const data = await citiesRequest(); setCities(data); } getData(); }, []) return ( <form id="cityChoice"> <label for="citySelected">Ville : </label> <select name="citiesList" id="citySelected"> {cities.map((city) => <option key={city} value={city}>{city}</option>)} </select> </form> ); } function citiesRequest(){ return fetch("https://api.jcdecaux.com/vls/v3/contracts?apiKey="+APIKEY) .then((response) => response.json()) .then(function(data){ return data }) }usando useState useEffect para que la página se vuelva a renderizar en el cambio de estado de las ciudades
function CitiesList(){ const [cities, setCities] = React.useState([]) React.useEffect(()=>{ if(!cities.length){ citiesRequest().then(result=>setCities(result)).catch(console.log) } },[cities]) return ( <form id="cityChoice"> <label for="citySelected">Ville : </label> <select name="citiesList" id="citySelected"> {cities.map((city) => <option key={city} value={city}>{city}</option>)} </select> </form> ); } function citiesRequest(){ return new Promise((resolve, reject)=>{ var citiesArray = []; fetch("https://api.jcdecaux.com/vls/v3/contracts?apiKey="+APIKEY) .then((response) => response.json()) .then(function(data){ data.forEach(element => { if(element.country_code == 'FR'){ citiesArray.push(element.name.toUpperCase()); } }); }).catch(err=>reject(err)) resolve(citiesArray); }) }