拖拽自动滚动问题

src/view/Manage/Model/Component/ImportActionIndex.jsx

@@ -603,18 +603,36 @@ const ImportActionIndex = (props) => {
     return hasValidateReports ? includeValidateColumn : columns;
   }
 
+  let pendingUpdateFn = undefined;
+  let requestedFrame = undefined;
+
+  const drawFrame = () => {
+    const newData = update(data, pendingUpdateFn);
+    
+    onChange && onChange(newData);
+
+    pendingUpdateFn = undefined;
+    requestedFrame = undefined;
+  };
+
+  const scheduleUpdate = (updateFn) => {
+    pendingUpdateFn = updateFn;
+    if (!requestedFrame) {
+      requestedFrame = requestAnimationFrame(drawFrame);
+    }
+  }
+
   const moveRow = useCallback(
     (dragIndex, hoverIndex) => {
 
       const dragRow = data[dragIndex];
-      const newData = update(data, {
+      scheduleUpdate({
         $splice: [
           [dragIndex, 1],
           [hoverIndex, 0, dragRow],
         ],
       });
 
-      onChange && onChange(newData);
     },
     //eslint-disable-next-line react-hooks/exhaustive-deps
     [data],

src/view/Manage/Model/Component/ImportActionTable.jsx

@@ -672,18 +672,39 @@ const ImportActionTable = (props) => {
     return hasValidateReports ? includeValidateColumn : columns;
   }
 
+  //增加拖拽自动滚动功能
+  //https://codesandbox.io/s/react-dnd-example-12-s3nnf?file=/src/Container.jsx:393-425 
+  let pendingUpdateFn = undefined;
+  let requestedFrame = undefined;
+
+  const drawFrame = () => {
+    const newData = update(data, pendingUpdateFn);
+    
+    onChangeRef.current && onChangeRef.current(newData);
+
+    pendingUpdateFn = undefined;
+    requestedFrame = undefined;
+  };
+
+  const scheduleUpdate = (updateFn) => {
+    pendingUpdateFn = updateFn;
+    if (!requestedFrame) {
+      requestedFrame = requestAnimationFrame(drawFrame);
+    }
+  }
+
   const moveRow = useCallback(
     (dragIndex, hoverIndex) => {
 
       const dragRow = data[dragIndex];
-      const newData = update(data, {
+      scheduleUpdate({
         $splice: [
           [dragIndex, 1],
           [hoverIndex, 0, dragRow],
         ],
       });
 
-      onChangeRef.current && onChangeRef.current(newData);
+      // onChangeRef.current && onChangeRef.current(newData);
     },
     //eslint-disable-next-line react-hooks/exhaustive-deps
     [data],