Quiero completar el menú desplegable con datos de Rest API. Intenté esto:
<Select id="country-helper"> {array.map((element) => ( <MenuItem value={element.code}>{element.country}</MenuItem> ))} </Select>Creé este servicio con Axios:
interfaz de exportación CountriesDTO { país?: cadena; código: cadena; }
import axios, { AxiosResponse } from "axios"; import { CountriesDTO } from "./types"; const baseUrl = "http://localhost:8080/api"; export async function getCountries(): Promise<AxiosResponse<CountriesDTO[]>> { return await axios.get<CountriesDTO[]>( `${baseUrl}/merchants/onboarding/countries` ); }No está claro cómo puedo hacer la llamada a la página de React. Intenté esto:
useEffect(() => { const getData = async () => { getCountries() .then((resp) => { console.log(resp.data); }) .catch((error) => { console.error(error); }); }; }, []);¿Cómo puedo completar el menú desplegable con los datos de la llamada GET API?
Simplemente llame a su función getData desde useEffect, también debe crear una matriz de estado para almacenar sus datos.
const [array, setArray] = useState<CountriesDTO[]>([]); // <=== create state array useEffect(() => { getData(); // <=== call your function }, []); const getData = async () => { getCountries() .then((resp) => { setArray(resp.data); }) .catch((error) => { console.error(error); }); };