Как правильно получить данные из БД при загрузке страницы React Js

Question

Необходимо получить данные из базы данных MongoDb прямо при загрузке страницы для дальнейшего использования. Я пытался сделать это примерно так:

const [api,setApi] = useState(null)
const [settings, setSettings] = useState(null)
useEffect(() => {
    (async () => {
        let queriesList = ['/api/get_api_data','/api/get_settings']
        let allInfo = await Promise.all(queriesList.map(async q => {
            return await axios.post(q)
        }))
        setApi(allInfo[0].data)
        setSettings(allInfo[1].data)
    })()
}, [setApi,setSettings])

Как сделать это грамотно, а не так, как получилось?) Ещё проблема заключается в том, что при загрузке страницы, запросы отправляются дважды.

Answer 1

Я бы это вот так реализовал Возможно функцию send вынес бы в отдельный модуль

useEffect(async () => {
    const send = (url) => {
      let result;
      axios.post(url)
        .then( res => {
          // Тут бы не плохо добавить проверки
          result = res[0].data;
        })
        .catch(rej => {
          // Что от обработать
          result = {} // Для примера
        })
      return result;
    };
    setApi(await send('/api/get_api_data'));
    setSettings(await send('/api/get_settings'));
}, []);

И обрати внимание, список зависимостей пуст, для того что бы вызов произошел только один раз, в момент создания компонента

БЛОГ НА HUSL

Как правильно получить данные из БД при загрузке страницы React Js

Ответы (1 шт):