0

Необходимо получить данные из базы данных 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])

Как сделать это грамотно, а не так, как получилось?)

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

1 ответ 1

0

Для того, что бы запрос отправлялся 1 раз при загрузке страницы(компонента), необходимо в хуке useEffect, в качестве зависимостей передать пустой массив.

useEffect(async () => {
    const send = (url) => {
      let result;
      await 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'));
}, []); // <-- Вот тут

Данных хук будет срабатывать только один раз в момент первичной установки компонента в DOM дерево. Это аналог componentDidMount

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.