DnD-kit添加列表元素时自动触发拖拽状态1秒的问题求助

你遇到的是@dnd-kit中PointerSensor在元素首次渲染时的误激活问题，新增元素的isDragging状态会短暂变为true，导致悬停效果闪一下。以下是几个可行的解决思路：

1. 给PointerSensor添加激活延迟 #

通过给PointerSensor设置delay参数，要求用户按住拖拽按钮超过指定时长才会激活拖拽状态，直接过滤掉首次渲染时的误触发。

修改传感器配置：

const sensors = useSensors(
  useSensor(PointerSensor, {
    activationConstraint: {
      distance: 8,
    },
    delay: 100, // 延迟100ms激活，可根据需求调整
  }),
  useSensor(KeyboardSensor, {
    coordinateGetter: sortableKeyboardCoordinates,
  }),
);

2. 基于组件挂载状态过滤isDragging #

在SortableItem组件中，利用组件挂载状态，只在元素完成挂载后才使用isDragging状态，避免初始渲染阶段的异常值影响样式。

示例代码：

import { useEffect, useState } from 'react';

const SortableItem = ({ id }) => {
  const [isMounted, setIsMounted] = useState(false);
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });

  useEffect(() => {
    setIsMounted(true);
  }, []);

  // 仅当组件挂载完成后，才启用拖拽状态的样式逻辑
  const realIsDragging = isMounted && isDragging;

  const style = {
    transform: CSS.Translate.toString(transform),
    transition,
    touchAction: 'none',
  };

  return (
    <div key={id} ref={setNodeRef} style={style}>
      <p className="text">SOME TEXT </p>
      <Button 
        className={`draggingButton ${realIsDragging ? '你的悬停类名' : ''}`} 
        {...attributes} 
        {...listeners}
      >
        <Image src="/dnd-button.svg" alt="dnd image" width={24} height={24} />
      </Button>
    </div>
  );
};

3. 确保SortableContext的items状态同步 #

检查sortableUniqueIdentifier数组的更新时机，确保新增元素完全加入数组后再传递给SortableContext的items属性，避免异步更新导致的上下文状态与组件渲染不同步，进而触发异常的拖拽状态。

内容的提问来源于stack exchange，提问作者Werthis