拖拽崩溃的问题

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

@@ -277,6 +277,9 @@ const ImportActionIndex = (props) => {
 
   const [ filterData, setFilterData ] = useState([]);
 
+  const dataRef = useRef();
+  dataRef.current = data;
+  
   //规则改变的时候 数据表为可编辑状态
   useEffect(() => {
     setEditingKey(null);
@@ -286,6 +289,7 @@ const ImportActionIndex = (props) => {
 
     setAttributes(modelerData.easyDataModelerDataModelAttributes||[]);
     setData(modelerData.easyDataModelerIndices||[]);
+    dataRef.current = (modelerData.easyDataModelerIndices||[]);
 
     const _filterData = (modelerData.easyDataModelerIndices||[]).filter(item => (item.name||'').indexOf(keyword)!==-1);
 
@@ -610,39 +614,20 @@ const ImportActionIndex = (props) => {
     return hasValidateReports ? includeValidateColumn : columns;
   }
 
-   //解决拖动自动滚动问题
-  //https://codesandbox.io/s/react-dnd-example-12-s3nnf
-  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];
-      scheduleUpdate({
+      const dragRow = dataRef.current[dragIndex];
+      const newData = update(dataRef.current, {
         $splice: [
           [dragIndex, 1],
           [hoverIndex, 0, dragRow],
         ],
-      });
+      })
+      onChange && onChange(newData);
     },
     //eslint-disable-next-line react-hooks/exhaustive-deps
-    [data],
+    [dataRef.current],
   );
 
   const onSearchInputChange = (e) => {

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

@@ -247,19 +247,22 @@ const ImportActionTable = (props) => {
   const onChangeRef = useRef();
   onChangeRef.current = onChange;
 
+  const dataRef = useRef();
+  dataRef.current = data;
+
   //规则改变的时候 数据表为可编辑状态
   useEffect(() => {
     setEditingKey('');
   }, [constraint, template, modelerData])
 
   useEffect(() => {
-
     setData(modelerData.easyDataModelerDataModelAttributes||[]);
-    setFilterData((modelerData.easyDataModelerDataModelAttributes||[]).filter(item => (item.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1));
+    dataRef.current = (modelerData.easyDataModelerDataModelAttributes||[]);
+    setFilterData((modelerData.easyDataModelerDataModelAttributes||[]).filter(item => (item?.name||'').indexOf(keyword)!==-1 || (item.cnName).indexOf(keyword)!==-1));
 
   }, [modelerData, keyword])
   
-  const isEditing = (record) => record.iid === editingKey;
+  const isEditing = (record) => record?.iid === editingKey;
 
   const onAddClick = () => {
   
@@ -481,7 +484,7 @@ const ImportActionTable = (props) => {
       editable: true,
       ellipsis: true,
       render: (_, record, __) => {
-        if (record.datatype) {
+        if (record?.datatype) {
 
           let _text = `名称: ${record.datatype.name||''}`;
 
@@ -694,39 +697,21 @@ const ImportActionTable = (props) => {
     return hasValidateReports ? includeValidateColumn : columns;
   }
 
-  //解决拖动自动滚动问题
-  //https://codesandbox.io/s/react-dnd-example-12-s3nnf
-  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];
-      scheduleUpdate({
+      const dragRow = dataRef.current[dragIndex];
+
+      const newData = update(dataRef.current, {
         $splice: [
           [dragIndex, 1],
           [hoverIndex, 0, dragRow],
         ],
-      });
+      })
+      onChangeRef.current && onChangeRef.current(newData);
     },
     //eslint-disable-next-line react-hooks/exhaustive-deps
-    [data],
+    [dataRef.current],
   );
 
   const onSearchInputChange = (e) => {
@@ -788,9 +773,9 @@ const ImportActionTable = (props) => {
                 },
               }}
               rowClassName={(record, index) => {
-                if (record.modelingTemplateTag && record.modelingTemplateTag!=={}) {
-                  return 'editable-row template-highlight-row';
-                }
+                // if (record.modelingTemplateTag && record.modelingTemplateTag!=={}) {
+                //   return 'editable-row template-highlight-row';
+                // }
 
                 return 'editable-row';
               }}