Как настроить loader, чтобы он отображался при загрузке данных через get запрос?

Как можно изменить код так, чтобы значение `isFetching` было установлено в `true` перед выполнением запроса и в `false` после его завершения, чтобы правильно отображался элемент "Loader"?
  • 9 октября 2023 г. 18:27
Ответы на вопрос 1
Для этого вам понадобится использовать состояние компонента, например, с помощью хука `useState`. Вам нужно будет создать переменную состояния `isFetching` и функцию `setFetching`, которая будет обновлять значение `isFetching`:

```javascript
import React, { useState, useEffect } from "react";

function YourComponent() {
  const [isFetching, setFetching] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      // Устанавливаем значение isFetching в true перед выполнением запроса
      setFetching(true);

      try {
        const response = await fetch("your-api-endpoint");
        const data = await response.json();

        // Обработка полученных данных

      } catch (error) {
        // Обработка ошибок
      }

      // Устанавливаем значение isFetching в false после завершения запроса
      setFetching(false);
    };

    fetchData();
  }, []);

  return (
    <div>
      {/* Проверяем значение isFetching и отображаем Loader при необходимости */}
      {isFetching && <Loader />}
      {/* Остальной контент компонента */}
    </div>
  );
}

export default YourComponent;
```

В этом примере мы создали переменную состояния `isFetching`, которая устанавливается в `true` перед выполнением запроса и в `false` после его завершения. Затем мы используем условный оператор `{}` для проверки значения `isFetching` и отображения компонента `Loader`, если `isFetching` равно `true`. Если `isFetching` равно `false`, отображается остальной контент компонента.
Похожие вопросы