Блог

Я работаю над веб-сайтом, который позволяет вам искать людей в базе данных на основе местоположения. Первоначально раскрывающееся меню (выберите) заполняется провинциями, в которых находятся доступные люди. Я пытаюсь использовать запрос mongo для заполнения этого меню выбора. Но когда я пытаюсь получить значения вне функции, это не работает, и меню выбора оказывается пустым.

 import * as React from "react"; import axios from "axios";   const Locations = () =gt; {   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 =gt; result.data).then(data =gt; {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  // e.g. ['British Columbia', 'Alberta', 'Saskatchewan', etc.]  }    var type = axiosTest();  console.log(type); // now it displays it as "undefined"   if (type) {  options = type.map((el) =gt; lt;option key={el}gt;{el}lt;/optiongt;);  }   return (  lt;div  style={{  padding: "16px",  margin: "16px",  }}  gt;  lt;formgt;  lt;divgt;  lt;selectgt;  {  /** 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  }  lt;/selectgt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  ); };   export default Locations;  

Может кто-нибудь, пожалуйста, помочь мне заставить это работать? Это как — то связано с потоками и параллелизмом? К сожалению, я в этом подзабыл.

Функция axiosTest() ничего не возвращает. Вы должны указать изменить свой код, чтобы функция возвращала результат запроса к БД. Вы также можете изменить .then() синтаксис, async/await чтобы ваш код стал более читабельным.

 const Locations = async () =gt; {   let options = null;   function axiosTest() {  return axios.get("/api/v2/people/provinces");  }    var type = await axiosTest();  console.log(type);    ...  };