wepro01's questions

我使用光标分页并希望像这样显示我的数据：

在底部，您可以转到第 1 页到第 29 页。要计算我的页数，我必须计算所有行。每次计算所有行是否很麻烦？是否有其他解决方案，或者我无法摆脱计算所有行的做法？

我也不使用偏移量，那么如何使用光标分页来实现呢？

  SELECT 
      wp.id,
      wp.updated_wst,
      u.id as user_id, u.firstname, u.lastname, 
      c.id as company_id, c.company,
      wst.id as wst_id,
      wst.start_time,
      wst.end_time,
      wst.send_start_at,
      wst.send_end_at,
      wst.accepted_by,
      wst.accepted_at,
      l.name as location
  FROM workers_plan wp
  LEFT JOIN users u
      ON u.id = wp.user_id  
  LEFT JOIN clients c
      ON c.id = u.company_id
  LEFT JOIN workers_send_times wst
      ON wst.workers_plan_id = wp.id
  LEFT JOIN location_orders lo
      ON lo.id = wp.location_orders_id
  LEFT JOIN location l
      ON l.id = lo.location_id  
  WHERE lo.id = $1 AND wp.tenant_id = $2 AND (wp.id, wp.updated_wst) > ($3, $4)          
  GROUP BY wp.id, wst.id, u.id, c.id, l.name
  ORDER BY wp.id, wp.updated_wst LIMIT 50

这是我当前的代码。但要显示页面，我必须先计算行数，然后计算。我该怎么做（性能最佳的方法）？

我使用 React Virtualized 来显示一些项目。我现在的问题是如何为每个框添加边距以使每个框之间都有空间？

这是一个沙箱，你可以看到所有箱子都有边框，没有空间。我该如何添加空间？

https://codesandbox.io/p/sandbox/react-virtualized-responsive-card-grid-w-infinite-scroll-forked-8kmr8t?file=%2Fsrc%2FApp.tsx

这是我的列表代码

export function VirtualizedGrid<ItemType>({
  items,
  renderItem,
  itemHeight,
  itemMinWidth,
  numColumns,
  registerChild,
  onRowsRendered
}: VirtualizedGridProps<ItemType>): JSX.Element {
  const gridRef = useRef<any>(null);
  const containerRef = useRef<any>(null);
  const containerWidth = containerRef?.current?.clientWidth ?? 0;

  const windowSize = useWindowSize();

  useEffect(() => {
    gridRef.current?.recomputeGridSize();
  }, [windowSize]);

  function calculateColumnCount(width: number) {
    return Math.floor(width / itemMinWidth);
  }

  function calculateItemWidth(width: number, columnCount: number) {
    return width / columnCount;
  }

  const columnCount = numColumns ?? calculateColumnCount(containerWidth);
  const rowCount = Math.ceil(items.length / columnCount);
  const itemWidth = calculateItemWidth(containerWidth, columnCount);

  return (
    <Container ref={containerRef}>
      <WindowScroller>
        {({ height, isScrolling, onChildScroll, scrollTop }) => (
          <AutoSizer disableHeight>
            {() => {
              return (
                <Grid
                  // ref={gridRef}
                  ref={(el) => {
                    registerChild(el);
                    gridRef.current = el;
                  }}
                  autoHeight
                  columnCount={columnCount}
                  columnWidth={itemWidth}
                  width={containerWidth}
                  height={height}
                  rowCount={rowCount}
                  rowHeight={itemHeight}
                  isScrolling={isScrolling}
                  scrollTop={scrollTop}
                  onScroll={onChildScroll}
                  cellRenderer={(props: GridCellProps) => {
                    const fullProps: VirtualizedGridItemProps<ItemType> = {
                      ...props,
                      items,
                      columnCount: columnCount
                    };
                    return renderItem(fullProps);
                  }}
                />
              );
            }}
          </AutoSizer>
        )}
      </WindowScroller>
    </Container>
  );
}

我有一个依赖项 windowSize。我还有一个搜索输入字段，用于更新搜索状态。如果我在搜索状态中提示某些内容，我的网站当然会重新渲染，因为我更新了状态。但我有一个包含在 useCallback 中的函数，但问题是，它会被触发。那么为什么它会被触发？它应该只在依赖项/状态 windowSize 发生变化时触发。

  const [searchValue, setSearchValue] = useState<string>('');

  useEffect(() => {
    gridRef.current?.recomputeGridSize();
    console.log('TRIGGER WINDOW SIZE')
  }, [windowSize]);

  const calculateColumnCount = useCallback((width: number) => {
    console.log('CALLBACK FUNC')
    return Math.floor(width / itemMinWidth);
  }, [windowSize])

  const columnCount = numColumns ?? calculateColumnCount(containerWidth);

我只把重要的内容放在了代码片段中。如果你需要，我可以分享完整的代码。

我做错了什么？

我有一个名为 time_range 的字段，它是日期范围类型。

我的表名为“holidays”。我想获取当前处于假期中的所有用户。如何使用 daterange 类型来实现这一点？

我尝试过这个但是没有用。

SELECT time_range FROM holidays WHERE upper(time_range) > NOW() AND lower(time_range) < NOW()

我不想写这样的两个语句

if(filter_by_company) {
  query..
} else {
  query...
}

因此，选择用户，他们属于公司，而我作为管理员可以按公司 ID 进行筛选。我如何表示当筛选不存在时不满足条件？

SELECT * FROM users u
LEFT JOIN clients c
ON c.id = u.company_id
WHERE c.company_id = 'NAME' IF EXISTS ?? ELSE DONT ASK

我该怎么做？

我想使用无效查询，但它没有获取或触发它。

我有一个仪表板，并且我在导航上的用户屏幕上。我从用户屏幕改变一个操作，并想刷新其他文件中的仪表板。

用户：（此处 onSuccess 是未触发的 invalidateQueries）

  const {
    isPending,
    mutate
  } = useMutation({
    mutationKey: ["SETTINGS"],
    mutationFn: async (params: TMutateSettingsParam) => {
      console.log(params);
      const res = await axiosPrivate.post(`${URL}/auth/deleteAccountByAdmin`, params, {
        headers: headersJSON,
        withCredentials: true
      });

      const data: IReturnApi<null> = res.data;

      return data;
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({queryKey: ['dashboard']})
      toast.success(data.message);
    },
    onError: (err: AxiosError<IReturnApi<IValidationError[]>>, _variables) => {
      if(err.response) {
        toast.error(err.response.data.message);
      } else {
        toast.error('Es ist ein Fehler aufgetreten. Bitte wenden Sie sich an den Support.');
      }
    }
  });

这是我的 app.tsx

export const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <App />
        </AuthProvider>
      </QueryClientProvider>
    </BrowserRouter>
  </React.StrictMode>,
)

这是我想要使其无效的仪表板查询：

  const { 
    isLoading,
    isError,
    data,
    error
  } = useQuery({
    queryKey: ['dashboard'],
    refetchOnWindowFocus: false,
    queryFn: async () => {
      const res = await axiosPrivate.get(`${URL}/dashboard/getAll`, {
        headers: headersJSON,
        withCredentials: true
      });
    
      const data: IDashboardData = await res.data;
      return data;
    }
  });

我做错了什么？