从 MongoDB createAt 字段中分割精确时间

Question

Edgar Gomez

Asked: 2024-11-14 03:27:19 +0800 CST2024-11-14 03:27:19 +0800 CST 2024-11-14 03:27:19 +0800 CST

当 enabled 为 false 时 useQuery React 仍会触发

772

当我尝试执行从属查询时遇到问题。

这是组件的代码，它仅使用 react-query 显示来自 API REST 的信息，即使将启用设置为 false，我也可以在浏览器上看到

浏览器工具：

GET https://localhost:7065/api/Location/cityById/undefined
[HTTP/2 400  226ms]

XHRGET
https://localhost:7065/api/Location/parishById/undefined
[HTTP/2 400  212ms]

XHRGET
https://localhost:7065/api/Location/townShipById/undefined
[HTTP/2 400  128ms]

XHRGET
https://localhost:7065/api/Location/zoneTypeById/undefined
[HTTP/2 400  181ms]

XHRGET
https://localhost:7065/api/Location/cityById/undefined
[HTTP/2 400  209ms]

XHRGET
https://localhost:7065/api/Location/parishById/undefined
[HTTP/2 400  155ms]

XHRGET
https://localhost:7065/api/Location/zoneTypeById/undefined
[HTTP/2 400  232ms]

XHRGET
https://localhost:7065/api/Location/townShipById/undefined

组件代码：

import { useQuery } from "@tanstack/react-query";
import { useRegisterFormViewContext } from "../providers/registerFormViewProvider";
import { useAuth } from "../hooks/useAuth";
import { GetStoreDetailService } from "../services/storeDetailService";
import { GetEstimateService } from "../services/estimateService";
import {
  GetCityByIdService,
  GetParishedByIdService,
  GetStatesService,
  GetTwonShipByIdService,
  GetZoneTypesByIdService,
} from "../services/locationSerivce";

function ViewStoreDetail() {
  const { storedValue } = useAuth();

  const [state] = useRegisterFormViewContext();

  const { data: viewDetailStore, isPending: isPendingViewDetailStore } =
    useQuery({
      queryKey: ["viewStoreDetail"],
      queryFn: GetStoreDetailService(
        storedValue,
        state.select_store_id.select_store_id,
      ),
      staleTime: 0,
      enabled: true,
    });

  const { data: estimateData, isPending: isPendingEstimateData } = useQuery({
    queryKey: ["viewStoreDetailEstimate"],
    queryFn: GetEstimateService(storedValue),
    staleTime: 0,
    enabled: true,
  });

  const { data: states, isPending: isPendingStates } = useQuery({
    queryKey: ["viewStoreDetailStates"],
    queryFn: GetStatesService(storedValue),
    staleTime: 0,
    enabled: true,
  });

  const cityId = viewDetailStore?.std_dir_city_id;

  const { data: city, isPending: isPendingCity } = useQuery({
    enabled: false,
    queryKey: ["viewStoreDetailCity", cityId],
    queryFn: GetCityByIdService(storedValue, cityId),
    staleTime: 0,
  });

  const parishedId = viewDetailStore?.std_dir_parroquia_id;

  const { data: parished, isPending: isPendingParisged } = useQuery({
    enabled: false,
    queryKey: ["viewStoreDetailParished", parishedId],
    queryFn: GetParishedByIdService(storedValue, parishedId),
    staleTime: 0,
  });

  const townshipId = parished?.par_tow_id;

  const { data: township, isPending: isPendingTownShip } = useQuery({
    enabled: false,
    queryKey: ["viewStoreDetailTownship", townshipId],
    queryFn: GetTwonShipByIdService(storedValue, townshipId),
    staleTime: 0,
  });

  const transportId = viewDetailStore?.std_dir_zone_type_id;

  const { data: transportType, isPending: isPendingTransportType } = useQuery({
    enabled: false,
    queryKey: ["viewStoreDetailTransporType", transportId],
    queryFn: GetZoneTypesByIdService(storedValue, transportId),
    staleTime: 0,
  });

  return (
    <div className="h-[calc(100vh-64px)] border-2 border-black">
      SHOW information of the queries in the future...
    </div>
  );
}

export default ViewStoreDetail;

以下是我的 API 调用：

import { GetBaseUrl } from "./apiBaseUrl";

export async function GetStatesService(storedValue) {
  try {
    const response = await fetch(GetBaseUrl() + "api/Location/states", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json; charset=UTF-8",
        Authorization: `Bearer ${storedValue}`,
      },
    });

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    return response.json();
  } catch (error) {
    throw new Error("Obtener estados fallo: " + error.message);
  }
}

export async function GetCitiesByStateService(storedValue, stateId) {
  try {
    const response = await fetch(
      GetBaseUrl() + `api/Location/citiesByState/${stateId}`,
      {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json; charset=UTF-8",
          Authorization: `Bearer ${storedValue}`,
        },
      },
    );

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    return response.json();
  } catch (error) {
    throw new Error("Obtener ciudades fallo: " + error.message);
  }
}

export async function GetCityByIdService(storedValue, cityId) {
  try {
    const response = await fetch(
      GetBaseUrl() + `api/Location/cityById/${cityId}`,
      {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json; charset=UTF-8",
          Authorization: `Bearer ${storedValue}`,
        },
      },
    );

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    return response.json();
  } catch (error) {
    throw new Error("Obtene ciudad fallo: " + error.message);
  }
}

export async function GetTwonShipsByStateService(storedValue, stateId) {
  try {
    const response = await fetch(
      GetBaseUrl() + `api/Location/townShipsByState/${stateId}`,
      {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json; charset=UTF-8",
          Authorization: `Bearer ${storedValue}`,
        },
      },
    );

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    return response.json();
  } catch (error) {
    throw new Error("Obtener municipios fallo: " + error.message);
  }
}

export async function GetTwonShipByIdService(storedValue, twonShipId) {
  try {
    const response = await fetch(
      GetBaseUrl() + `api/Location/townShipById/${twonShipId}`,
      {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json; charset=UTF-8",
          Authorization: `Bearer ${storedValue}`,
        },
      },
    );

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    return response.json();
  } catch (error) {
    throw new Error("Obtene municipio fallo: " + error.message);
  }
}

export async function GetParishedByTownShipService(storedValue, townShipId) {
  try {
    const response = await fetch(
      GetBaseUrl() + `api/Location/parishesByTownShip/${townShipId}`,
      {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json; charset=UTF-8",
          Authorization: `Bearer ${storedValue}`,
        },
      },
    );

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    return response.json();
  } catch (error) {
    throw new Error("Obtener parroquias fallo: " + error.message);
  }
}

export async function GetParishedByIdService(storedValue, parishedId) {
  try {
    const response = await fetch(
      GetBaseUrl() + `api/Location/parishById/${parishedId}`,
      {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json; charset=UTF-8",
          Authorization: `Bearer ${storedValue}`,
        },
      },
    );

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    return response.json();
  } catch (error) {
    throw new Error("Obtene parroquia fallo: " + error.message);
  }
}

export async function GetZoneTypesService(storedValue) {
  try {
    const response = await fetch(GetBaseUrl() + "api/Location/zoneTypes", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json; charset=UTF-8",
        Authorization: `Bearer ${storedValue}`,
      },
    });

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    return response.json();
  } catch (error) {
    throw new Error("Obtener tipos de zonas fallo: " + error.message);
  }
}

export async function GetZoneTypesByIdService(storedValue, zoneTypeId) {
  try {
    const response = await fetch(
      GetBaseUrl() + `api/Location/zoneTypeById/${zoneTypeId}`,
      {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json; charset=UTF-8",
          Authorization: `Bearer ${storedValue}`,
        },
      },
    );

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    return response.json();
  } catch (error) {
    throw new Error("Obtener tipo de zona fallo: " + error.message);
  }
}

这是我的App.jsx：

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Homepage from "./pages/Homepage";
import Login from "./pages/Login";
import EmptyLayaout from "./layaout/EmptyLayaout";
import AppLayaout from "./layaout/AppLayaout";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { AuthProvider } from "./hooks/useAuth";
import PrivateRoute from "./pages/PrivateRoute";
import Users from "./pages/Users";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from "react-toastify";
import ViewStoreDetail from "./pages/ViewStoreDetail";
import UpdateStoreDetail from "./pages/UpdateStoreDetail";
import SelectViewStoreDetail from "./pages/SelectViewStoreDetail";
import RegisterFormViewProvider from "./providers/registerFormViewProvider";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000,
      enabled: false,
    },
  },
});

const router = createBrowserRouter([
  {
    element: <EmptyLayaout />,
    children: [
      {
        path: "/login",
        element: <Login />,
      },
    ],
  },
  {
    element: <AppLayaout />,
    children: [
      {
        path: "/",
        element: (
          <PrivateRoute redirectTo="/login">
            <Homepage />
          </PrivateRoute>
        ),
      },
      {
        path: "/view-store",
        element: (
          <PrivateRoute redirectTo="/login">
            <SelectViewStoreDetail />
          </PrivateRoute>
        ),
      },
      {
        path: "/view-store-detail-resume",
        element: (
          <PrivateRoute redirectTo="/login">
            <ViewStoreDetail />
          </PrivateRoute>
        ),
      },
      {
        path: "/update-store",
        element: (
          <PrivateRoute redirectTo="/login">
            <UpdateStoreDetail />
          </PrivateRoute>
        ),
      },
      {
        path: "/users",
        element: (
          <PrivateRoute redirectTo="/login">
            <Users />
          </PrivateRoute>
        ),
      },
    ],
  },
]);

function App() {
  return (
    <RegisterFormViewProvider>
      <AuthProvider>
        <ToastContainer />
        <QueryClientProvider client={queryClient}>
          <ReactQueryDevtools initialIsOpen={false} position="right" />
          <RouterProvider router={router} />
        </QueryClientProvider>
      </AuthProvider>
    </RegisterFormViewProvider>
  );
}

export default App;

我不知道为什么如果启用设置为 false 它会继续触发查询

1 个回答

Voted

David Adokuru · Answer 1 · 2024-11-14T07:45:58+08:00

Best Answer

David Adokuru

2024-11-14T07:45:58+08:002024-11-14T07:45:58+08:00

查看此组件，在每次 useQuery 调用中，您都会直接在 queryFn 中调用服务函数，而不是将其作为查询运行时要调用的函数传递。此方法会在组件安装时立即执行该函数，忽略 enabled: false。

尝试此操作并对其他查询进行类似的更改

const { data: viewDetailStore, isPending: isPendingViewDetailStore } = useQuery({
  queryKey: ["viewStoreDetail"],
  queryFn: () => GetStoreDetailService(
    storedValue,
    state.select_store_id.select_store_id,
  ),
  staleTime: 0,
  enabled: true,
});

1

当 enabled 为 false 时 useQuery React 仍会触发

`(表达式，左值) = 右值` 在 C 或 C++ 中是有效的赋值吗？为什么有些编译器会接受/拒绝它？

何时应使用 std::inplace_vector 而不是 std::vector？

在 C++ 中，一个不执行任何操作的空程序需要 204KB 的堆，但在 C 中则不需要

如果 T 既不可构造、不可复制、也不可移动，那么我可以拥有 std::optional<T> 吗？

为什么我可以定义一个 constinit 的 std::string 实例？如果对象需要动态初始化，constinit 不是被禁止的吗？

如何分配以后放置的新“如同新”

PowerBI 目前与 BigQuery 不兼容：Simba 驱动程序与 Windows 更新有关

将 NULL 和 nullptr 传递给模板参数有什么区别？

AdMob：MobileAds.initialize() - 对于某些设备，“java.lang.Integer 无法转换为 java.lang.String”

我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

当 enabled 为 false 时 useQuery React 仍会触发

1 个回答

相关问题