React-dnd: تتوقف HTML5Backend عن السحب عندما تظهر / تختفي عناصر في DOM في حدث السحب: CHROME

لقد وجدت حلاً ، قرأت كثيرًا ، لهذه المشكلة ، تعيين مهلة ومتغير حالة أقوم بتمريره عبر المكونات ، لا أحب ذلك كثيرًا ، لأنه في هذه الحالات البسيطة ، من السهل القيام بذلك ، ولكن في حالة معقدة الحالات يجب أن أستخدم السياق أو شيء مشابه لجعل كل شيء يعمل.
https://codesandbox.io/s/react-dnd-sortable-holes-vxeus

آمل أن تتمكن من إرشادي من خلال حل أفضل ، أود استخدام isDragging من المكتبة بدلاً من هذا الحل البديل.

قام فريقنا بتحسين حل الحالة بإنشاء خطاف مخصص لمزود السحب والإفلات ، في أي حال يواجه أي منكم هذه المشكلة ، إليك الحل أثناء حل الخطأ.

https://codesandbox.io/s/react-dnd-sortable-gaps-custom-9tl13

يتكون الجزء الرئيسي من تحديد سياق وموفر لتخزين حالة السحب.

const DndContext = React.createContext([{}, () => {}]);

const DndCustomProvider = props => {
  const [state, setState] = useState({ dragging: false });

  return (
    <DndProvider backend={props.backend}>
      <DndContext.Provider value={[state, setState]}>
        {props.children}
      </DndContext.Provider>
    </DndProvider>
  );
};

ثانيًا ، باستخدام setTimeout في وظيفة بدء السحب ، يتم تجنب النهاية المرسلة.

  const [context, setContext] = useContext(DndContext);

  const [collected, dragRef] = useDrag({
    ...,
    begin: monitor => {
      setTimeout(() => {
        setContext(() => ({ dragging: true }));
      }, 0);

      if (begin) {
        begin(monitor);
      }
    },
    end: (item, monitor) => {
      setContext(() => ({ dragging: false }));

      if (end) {
        end(item, monitor);
      }
    },
    ...
  });

  return [
    {
      ...collected,
      isDragging: context.dragging
    },
    dragRef
  ];

وأخيرًا ، يتم استبدال القيمة المجمعة isDragging بقيمة السياق.

هل لدى أي شخص حل أو فكرة لإصلاح هذه المشكلة التي لا تتضمن مثل هذا الحل؟