Javascript 为什么我的第二个OnClick Isloading值在TEK查询Mutations 查询中不起作用

发布于05月01日

为什么我对personDataSend的第二次调用设置isLoading值在TEK查询Mutations 查询中不起作用？当您第一次执行onClick时，isLoading为真，但在第二次单击时，它不是真，在第二次单击时，值仍然为假.

const [
  getDriverLicenseByPin,
  { data, isLoading },
] = useLazyGetDriverLicenseByPinQuery();
  
const personDataSend = (values) => {
  getDriverLicenseByPin({
    pin: values.Pin,
    driverLicenseNumber: values.DriverLicenseNumber,
  });
};

推荐答案

收件箱实际上只加载一次，例如尚未缓存数据时.您可能希望使用isFetching状态，每当查询主动获取时，该状态都为真.

见useLazyQuery:

type UseQueryStateResult<T> = {
  // Base query state
  originalArgs?: unknown // Arguments passed to the query
  data?: T // The latest returned result regardless of trigger arg, if present
  currentData?: T // The latest returned result for the trigger arg, if present
  error?: unknown // Error result if present
  requestId?: string // A string generated by RTK Query
  endpointName?: string // The name of the given endpoint for the query
  startedTimeStamp?: number // Timestamp for when the query was initiated
  fulfilledTimeStamp?: number // Timestamp for when the query was completed

  isUninitialized: false // Query has not started yet.
  isLoading: false // Query is currently loading for the first time. No data yet.
  isFetching: false // Query is currently fetching, but might have data from an earlier request.
  isSuccess: false // Query has data from a successful load.
  isError: false // Query is currently in an "error" state.
}

更新您的逻辑以也引用isFetching状态，当重新触发/重新获取查询端点时，该状态应该为真.

const [
  getDriverLicenseByPin,
  { data, isLoading: isLoadingData, isFetching },
] = useLazyGetDriverLicenseByPinQuery();

const isLoading = isLoadingData || isFetching;
  
const personDataSend = (values) => {
  getDriverLicenseByPin({
    pin: values.Pin,
    driverLicenseNumber: values.DriverLicenseNumber,
  });
};