React Dynamic - Developper Tool Error - Chrome
I don't know if anyone else had this issue. But I set up the example on my device and it works just like the demo, except when using developer tools. This issue only happens with the React Dynamic example. When swapping items, they do not snap into place and they stack. This often gives this error:
Uncaught TypeError: Cannot read properties of null (reading 'dataset')
Did anyone else have the same issue? If so, did you guys find a solution?
Here is my exact code:
import { useEffect, useMemo, useRef, useState } from 'react'
import { SlotItemMapArray, Swapy, utils } from 'swapy'
import { createSwapy } from 'swapy'
type Item = {
id: string
title: string
}
const initialItems: Item[] = [
{ id: '1', title: '1' },
{ id: '2', title: '2' },
{ id: '3', title: '3' },
]
let id = 4
function App() {
const [items, setItems] = useState<Item[]>(initialItems);
const [slotItemMap, setSlotItemMap] = useState<SlotItemMapArray>(utils.initSlotItemMap(items, 'id'));
const slottedItems = useMemo(() => utils.toSlottedItems(items, 'id', slotItemMap), [items, slotItemMap]);
const swapyRef = useRef<Swapy | null>(null);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => utils.dynamicSwapy(swapyRef.current, items, 'id', slotItemMap, setSlotItemMap), [items]);
useEffect(() => {
swapyRef.current = createSwapy(containerRef.current!, {
manualSwap: true,
});
swapyRef.current.onSwap((event) => {
setSlotItemMap(event.newSlotItemMap.asArray);
});
return () => {
swapyRef.current?.destroy();
};
}, []);
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4" ref={containerRef}>
<div className="flex gap-4 flex-wrap bg-white p-4 rounded-md shadow-md">
{slottedItems.map(({ slotId, itemId, item }) => (
<div key={slotId} data-swapy-slot={slotId} className="w-20 h-20 border-2 border-dashed border-gray-300 flex items-center justify-center">
{item && (
<div className="w-16 h-16 bg-blue-500 text-white font-bold flex items-center justify-center rounded-md shadow-md cursor-pointer"
data-swapy-item={itemId} key={itemId}>
<span>{item.title}</span>
<span className="ml-2 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs cursor-pointer"
onClick={() => setItems(items.filter(i => i.id !== item.id))}>
×
</span>
</div>
)}
</div>
))}
</div>
<div className="mt-4 w-12 h-12 bg-green-500 text-white font-bold flex items-center justify-center rounded-full shadow-md cursor-pointer hover:bg-green-600"
onClick={() => {
const newItem: Item = { id: `${id}`, title: `${id}` };
setItems([...items, newItem]);
id++;
}}>
+
</div>
</div>
);
}
export default App;
0 条评论