Soy bastante nuevo en los ganchos y estoy tratando de usar setState para los datos que obtengo de una API, pero el estado nunca se actualiza. Solo necesito hacer la llamada cuando se monta el componente, razón por la cual el segundo argumento en mi useEffect es una matriz vacía. Puedo ver que estoy recuperando los datos cuando consola.Registro la respuesta, simplemente no se está configurando.
const [routeOptions, setRouteOptions] = useState() useEffect(() => { Axios.get("https://svc.metrotransit.org/NexTrip/Routes?format=json").then(response => { const routes = response.data setRouteOptions(routes) }); }, []);Luego trato de mapear los datos de esta manera:
{routeOptions && routeOptions.map(option => { <option> {option.description} </option> })}pero debido a que mi estado nunca se estableció, no hay nada que mapear.
Es posible que me esté perdiendo algo muy obvio porque no estoy familiarizado con los ganchos, ¡así que agradezco cualquier ayuda!
Debe devolver un valor de su .map() . Asegúrate de darle a tu <option> una key única también.
Tenga en cuenta también que la propiedad de la ruta Description tiene una D mayúscula :)
<select> {routeOptions.map((option) => { return <option key={option.Route}>{option.Description}</option>; })} </select>aqui esta todo junto
import { useState, useEffect } from "react"; import Axios from "axios"; export default function Test() { const [routeOptions, setRouteOptions] = useState(null); useEffect(() => { Axios.get("https://svc.metrotransit.org/NexTrip/Routes?format=json").then( (response) => { const routes = response.data; setRouteOptions(routes); } ); }, []); if (!routeOptions) return ( <div> <p>Loading...</p> </div> ); return ( <select> {routeOptions.map((option) => { return <option key={option.Route}>{option.Description}</option>; })} </select> ); }intente usar Async-select https://react-select.com/async y cree una función que devuelva una matriz de pares {etiqueta, valor} en lugar de perder el tiempo atascado aquí.