fix: lazy render bug (#3886)

* fix: lazy render bug --------- Co-authored-by: Zeke Zhang <958414905@qq.com>
2024-11-15 08:55:33 +00:00 · 2024-04-03 09:13:45 +08:00 · 2024-04-03 09:13:45 +08:00 · cc75f6f4d2
commit cc75f6f4d2
parent 6fd456faf7
9 changed files with 12 additions and 63 deletions
--- a/packages/core/client/src/data-source/data-block/DataBlockRequestProvider.tsx
+++ b/packages/core/client/src/data-source/data-block/DataBlockRequestProvider.tsx
@ -1,4 +1,3 @@
-import { useDeepCompareEffect, useUpdateEffect } from 'ahooks';
 import React, { FC, createContext, useContext, useMemo } from 'react';

 import { UseRequestResult, useAPIClient, useRequest } from '../../api-client';
@ -8,7 +7,7 @@ import { useDataBlockResource } from './DataBlockResourceProvider';
 import { useDataSourceHeaders } from '../utils';
 import _ from 'lodash';
 import { useDataLoadingMode } from '../../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
-import { useCollection, useCollectionManager } from '../collection';
+import { useCollectionManager } from '../collection';

 export const BlockRequestContext = createContext<UseRequestResult<any>>(null);
 BlockRequestContext.displayName = 'BlockRequestContext';
@ -17,6 +16,7 @@ function useCurrentRequest<T>(options: Omit<AllDataBlockProps, 'type'>) {
  const dataLoadingMode = useDataLoadingMode();
  const resource = useDataBlockResource();
  const { action, params = {}, record, requestService, requestOptions } = options;
+
  const service = useMemo(() => {
    return requestService
      ? requestService
@ -31,26 +31,15 @@ function useCurrentRequest<T>(options: Omit<AllDataBlockProps, 'type'>) {

          return resource[action]({ ...paramsValue, ...customParams }).then((res) => res.data);
        };
-  }, [resource, action, params, record, requestService]);
+  }, [resource, action, JSON.stringify(params), JSON.stringify(record), requestService]);

  const request = useRequest<T>(service, {
    ...requestOptions,
-    manual: true,
+    manual: dataLoadingMode === 'manual',
+    ready: !!action,
+    refreshDeps: [action, JSON.stringify(params), JSON.stringify(record), resource],
  });

-  // 因为修改 Schema 会导致 params 对象发生变化，所以这里使用 `DeepCompare`
-  useDeepCompareEffect(() => {
-    if (action && dataLoadingMode === 'auto') {
-      request.run();
-    }
-  }, [params, action, record]);
-
-  useUpdateEffect(() => {
-    if (action && dataLoadingMode === 'auto') {
-      request.run();
-    }
-  }, [resource]);
-
  return request;
 }

--- a/packages/core/client/src/modules/blocks/data-blocks/details-multi/detailsWithPaginationSettings.tsx
+++ b/packages/core/client/src/modules/blocks/data-blocks/details-multi/detailsWithPaginationSettings.tsx
@ -8,7 +8,7 @@ import { useCollection_deprecated, useSortFields } from '../../../../collection-
 import { removeNullCondition, useDesignable } from '../../../../schema-component';
 import { SchemaSettingsBlockTitleItem, SchemaSettingsTemplate } from '../../../../schema-settings';
 import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
-import { setDataLoadingModeSettingsItem, useDataLoadingMode } from './setDataLoadingModeSettingsItem';
+import { setDataLoadingModeSettingsItem } from './setDataLoadingModeSettingsItem';
 import { SchemaSettingsItemType } from '../../../../application/schema-settings/types';

 const commonItems: SchemaSettingsItemType[] = [
@ -24,9 +24,7 @@ const commonItems: SchemaSettingsItemType[] = [
      const fieldSchema = useFieldSchema();
      const { form } = useFormBlockContext();
      const field = useField();
-      const { service } = useDetailsBlockContext();
      const { dn } = useDesignable();
-      const dataLoadingMode = useDataLoadingMode();
      return {
        collectionName: name,
        defaultFilter: fieldSchema?.['x-decorator-props']?.params?.filter || {},
@ -38,10 +36,6 @@ const commonItems: SchemaSettingsItemType[] = [
          field.decoratorProps.params = params;
          fieldSchema['x-decorator-props']['params'] = params;

-          if (dataLoadingMode === 'auto') {
-            service.run({ ...service.params?.[0], filter });
-          }
-
          dn.emit('patch', {
            schema: {
              ['x-uid']: fieldSchema['x-uid'],
--- a/packages/core/client/src/modules/blocks/data-blocks/table-selector/tableSelectorBlockSettings.ts
+++ b/packages/core/client/src/modules/blocks/data-blocks/table-selector/tableSelectorBlockSettings.ts
@ -46,10 +46,6 @@ export const tableSelectorBlockSettings = new SchemaSettings({
              }
            }

-            if (dataLoadingMode === 'auto') {
-              service.run({ ...service.params?.[0], filter: serviceFilter, page: 1 });
-            }
-
            dn.emit('patch', {
              schema: {
                ['x-uid']: fieldSchema['x-uid'],
--- a/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx
+++ b/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx
@ -7,7 +7,7 @@ import {
  useCollection_deprecated,
  useSortFields,
 } from '../../../../collection-manager';
-import { mergeFilter, FilterBlockType } from '../../../../filter-provider';
+import { FilterBlockType } from '../../../../filter-provider';
 import { useDesignable, removeNullCondition } from '../../../../schema-component';
 import {
  SchemaSettingsBlockTitleItem,
@ -21,7 +21,7 @@ import { useTranslation } from 'react-i18next';
 import { ArrayItems } from '@formily/antd-v5';
 import { FixedBlockDesignerItem } from '../../../../schema-component/antd/page/FixedBlockDesignerItem';
 import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
-import { setDataLoadingModeSettingsItem, useDataLoadingMode } from '../details-multi/setDataLoadingModeSettingsItem';
+import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';

 export const tableBlockSettings = new SchemaSettings({
  name: 'blockSettings:table',
@ -139,7 +139,6 @@ export const tableBlockSettings = new SchemaSettings({
        const { form } = useFormBlockContext();
        const { service } = useTableBlockContext();
        const { dn } = useDesignable();
-        const dataLoadingMode = useDataLoadingMode();
        const onDataScopeSubmit = useCallback(
          ({ filter }) => {
            filter = removeNullCondition(filter);
@ -149,13 +148,6 @@ export const tableBlockSettings = new SchemaSettings({
            fieldSchema['x-decorator-props']['params'] = params;
            const filters = service.params?.[1]?.filters || {};

-            if (dataLoadingMode === 'auto') {
-              service.run(
-                { ...service.params?.[0], filter: mergeFilter([...Object.values(filters), filter]), page: 1 },
-                { filters },
-              );
-            }
-
            dn.emit('patch', {
              schema: {
                ['x-uid']: fieldSchema['x-uid'],
--- a/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx
+++ b/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx
@ -20,7 +20,7 @@ export const CardItem = (props: Props) => {
  const templateKey = fieldSchema?.['x-template-key'];
  const { wrapSSR, componentCls, hashId } = useStyles();
  const { ref, inView } = useInView({
-    threshold: 1,
+    threshold: 0,
    initialInView: true,
    triggerOnce: true,
    skip: !!process.env.__E2E__,
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
@ -516,7 +516,7 @@ export const Table: any = withDynamicSchemaProps(

        return (
          <td {...props} ref={ref} className={classNames(props.className, cellClass)}>
-            {inView || isIndex ? props.children : <Skeleton.Input active />}
+            {inView || isIndex ? props.children : <Skeleton.Button active />}
          </td>
        );
      },
--- a/packages/plugins/@nocobase/plugin-gantt/src/client/Gantt.Settings.tsx
+++ b/packages/plugins/@nocobase/plugin-gantt/src/client/Gantt.Settings.tsx
@ -10,7 +10,6 @@ import {
  useCollection,
  useCollection_deprecated,
  useCompile,
-  useDataLoadingMode,
  useDesignable,
  useFormBlockContext,
 } from '@nocobase/client';
@ -206,9 +205,7 @@ export const oldGanttSettings = new SchemaSettings({
        const fieldSchema = useFieldSchema();
        const { form } = useFormBlockContext();
        const field = useField();
-        const { service } = useGanttBlockContext();
        const { dn } = useDesignable();
-        const dataLoadingMode = useDataLoadingMode();
        return {
          collectionName: name,
          defaultFilter: fieldSchema?.['x-decorator-props']?.params?.filter || {},
@ -220,10 +217,6 @@ export const oldGanttSettings = new SchemaSettings({
            field.decoratorProps.params = params;
            fieldSchema['x-decorator-props']['params'] = params;

-            if (dataLoadingMode === 'auto') {
-              service.run({ ...service.params?.[0], filter });
-            }
-
            dn.emit('patch', {
              schema: {
                ['x-uid']: fieldSchema['x-uid'],
@ -452,9 +445,7 @@ export const ganttSettings = new SchemaSettings({
        const fieldSchema = useFieldSchema();
        const { form } = useFormBlockContext();
        const field = useField();
-        const { service } = useGanttBlockContext();
        const { dn } = useDesignable();
-        const dataLoadingMode = useDataLoadingMode();
        return {
          collectionName: name,
          defaultFilter: fieldSchema?.['x-decorator-props']?.params?.filter || {},
@ -466,10 +457,6 @@ export const ganttSettings = new SchemaSettings({
            field.decoratorProps.params = params;
            fieldSchema['x-decorator-props']['params'] = params;

-            if (dataLoadingMode === 'auto') {
-              service.run({ ...service.params?.[0], filter });
-            }
-
            dn.emit('patch', {
              schema: {
                ['x-uid']: fieldSchema['x-uid'],
--- a/packages/plugins/@nocobase/plugin-kanban/src/client/Kanban.tsx
+++ b/packages/plugins/@nocobase/plugin-kanban/src/client/Kanban.tsx
@ -131,7 +131,7 @@ export const Kanban: any = withDynamicSchemaProps(
            const columnIndex = dataSource?.indexOf(column);
            const cardIndex = column?.cards?.indexOf(card);
            const { ref, inView } = useInView({
-              threshold: 0.8,
+              threshold: 0,
              triggerOnce: true,
              initialInView: lastDraggedCard.current && lastDraggedCard.current === card[primaryKey],
            });
--- a/packages/plugins/@nocobase/plugin-map/src/client/block/MapBlock.Settings.tsx
+++ b/packages/plugins/@nocobase/plugin-map/src/client/block/MapBlock.Settings.tsx
@ -10,7 +10,6 @@ import {
  SchemaSettingsModalItem,
  SchemaSettingsSelectItem,
  SchemaSettingsTemplate,
-  mergeFilter,
  useCollection,
  useDesignable,
  useFormBlockContext,
@ -179,7 +178,6 @@ export const mapBlockSettings = new SchemaSettings({
        const field = useField();
        const { service } = useMapBlockContext();
        const { dn } = useDesignable();
-        const dataLoadingMode = useDataLoadingMode();
        return {
          collectionName: name,
          defaultFilter: fieldSchema?.['x-decorator-props']?.params?.filter || {},
@ -191,13 +189,6 @@ export const mapBlockSettings = new SchemaSettings({
            fieldSchema['x-decorator-props']['params'] = params;
            const filters = service.params?.[1]?.filters || {};

-            if (dataLoadingMode === 'auto') {
-              service.run(
-                { ...service.params?.[0], filter: mergeFilter([...Object.values(filters), filter]), page: 1 },
-                { filters },
-              );
-            }
-
            dn.emit('patch', {
              schema: {
                ['x-uid']: fieldSchema['x-uid'],