Estoy trabajando en un sitio web que te permite buscar personas en una base de datos según su ubicación. Inicialmente, el menú desplegable (seleccionar) se completa con las provincias en las que se encuentran las personas disponibles. Estoy tratando de usar una consulta mongo para completar ese menú de selección. Pero cuando trato de obtener los valores fuera de la función, no funciona y el menú de selección aparece vacío.

 import * as React from "react"; import axios from "axios"; const Locations = () => { let options = null; function axiosTest() { // This is a server link i created that runs a query that returns distinct provinces from the database const promise = axios.get("/api/v2/people/provinces"); const dataPromise = promise.then(result => result.data).then(data => {console.log(data);return data;}); // The console.log() above displays all the objects that are in the query given by the server link in an array // eg ['British Columbia', 'Alberta', 'Saskatchewan', etc.] } var type = axiosTest(); console.log(type); // now it displays it as "undefined" if (type) { options = type.map((el) => <option key={el}>{el}</option>); } return ( <div style={{ padding: "16px", margin: "16px", }} > <form> <div> <select> { /** This is where we have used our options variable */ options // and the select menu is shown as blank, because it doesn't have any options to fill it with } </select> </div> </form> </div> ); }; export default Locations;

¿Puede alguien por favor ayudarme a hacer que esto funcione? ¿Tiene algo que ver con subprocesos y concurrencia? Desafortunadamente estoy oxidado en eso.