Как остановить бесконечный запрос API на бэкэнде?

В моем компоненте панели инструментов я получаю все заказы пользователя внутри крючка.useEffectхук имеет зависимость отuser & orders state.

      useEffect(() => {
    let isMounted = true;
    fetch(`http://localhost:5000/allorders?email=${user?.email}`, {
      headers: {
        authorization: `Bearer ${localStorage.getItem("accessToken")}`,
      },
    })
      .then((res) => res.json())
      .then((data) => {
        if (isMounted) {
          setOrders(data);
        }
      })
      .catch((error) => console.log(error));
    return () => {
      isMounted = false;
    };
  }, [user?.email, orders]);

Проблема в том, что у меня бесконечный запрос API на/allOrdersконечная точка моего экспресс-сервера. Как я могу предотвратить отправку клиентским интерфейсом бесконечного запроса на мой внутренний сервер?

      GET /allorders?email=admin@admin.com 304 - - 59.084 ms
GET /allorders?email=admin@admin.com 304 - - 63.304 ms
GET /allorders?email=admin@admin.com 304 - - 58.676 ms
GET /allorders?email=admin@admin.com 304 - - 57.991 ms
GET /allorders?email=admin@admin.com 304 - - 57.935 ms
GET /allorders?email=admin@admin.com 304 - - 59.366 ms
GET /allorders?email=admin@admin.com 304 - - 61.231 ms
GET /allorders?email=admin@admin.com 304 - - 57.709 ms
GET /allorders?email=admin@admin.com 304 - - 59.637 ms
GET /allorders?email=admin@admin.com 304 - - 69.139 ms
GET /allorders?email=admin@admin.com 304 - - 58.118 ms
GET /allorders?email=admin@admin.com 304 - - 58.127 ms
GET /allorders?email=admin@admin.com 304 - - 61.101 ms
GET /allorders?email=admin@admin.com 304 - - 64.198 ms

Я попытался отобразить компонент, используяuseMemo & React.memo(). Поскольку у меня мало знаний о реагирующих хуках, я столкнулся с несколькими ошибками и в конечном итоге не смог остановить бесконечный запрос API.

0 ответов

Другие вопросы по тегам