🐛修复表格拖拽闪动问题，使用useCallback函数

src/pages/Wall/WallTable/index.tsx

@@ -161,49 +161,55 @@ function WallTable() {
 
   const type = "DraggableBodyRow";
 
-  const DraggableBodyRow = ({
-    index,
-    moveRow,
-    className,
-    style,
-    ...restProps
-  }: DraggableBodyRowProps) => {
-    const ref = useRef<HTMLTableRowElement>(null);
-    const [{ isOver, dropClassName }, drop] = useDrop({
-      accept: type,
-      collect: (monitor) => {
-        const { index: dragIndex } = monitor.getItem() || {};
-        if (dragIndex === index) {
-          return {};
-        }
-        return {
-          isOver: monitor.isOver(),
-          dropClassName:
-            dragIndex < index ? " drop-over-downward" : " drop-over-upward",
-        };
-      },
-      drop: (item: { index: number }) => {
-        moveRow(item.index, index);
-      },
-    });
-    const [, drag] = useDrag({
-      type,
-      item: { index },
-      collect: (monitor) => ({
-        isDragging: monitor.isDragging(),
-      }),
-    });
-    drop(drag(ref));
+  const DraggableBodyRow = useCallback(
+    ({
+      index,
+      moveRow,
+      className,
+      style,
+      ...restProps
+    }: DraggableBodyRowProps) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const ref = useRef<HTMLTableRowElement>(null);
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [{ isOver, dropClassName }, drop] = useDrop({
+        accept: type,
+        collect: (monitor) => {
+          const { index: dragIndex } = monitor.getItem() || {};
+          if (dragIndex === index) {
+            return {};
+          }
+          return {
+            isOver: monitor.isOver(),
+            dropClassName:
+              dragIndex < index ? " drop-over-downward" : " drop-over-upward",
+          };
+        },
+        drop: (item: { index: number }) => {
+          moveRow(item.index, index);
+        },
+      });
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [, drag] = useDrag({
+        type,
+        item: { index },
+        collect: (monitor) => ({
+          isDragging: monitor.isDragging(),
+        }),
+      });
+      drop(drag(ref));
 
-    return (
-      <tr
-        ref={ref}
-        className={`${className}${isOver ? dropClassName : ""}`}
-        style={{ cursor: "move", ...style }}
-        {...restProps}
-      />
-    );
-  };
+      return (
+        <tr
+          ref={ref}
+          className={`${className}${isOver ? dropClassName : ""}`}
+          style={{ cursor: "move", ...style }}
+          {...restProps}
+        />
+      );
+    },
+    []
+  );
 
   const components = {
     body: {