[Tabs文档] [可拖拽的选项卡]示例代码有问题

[zindler323]

tdesign-react 版本

官网demo版本

重现链接

https://tdesign.tencent.com/react/components/tabs#%E5%8F%AF%E6%8B%96%E6%8B%BD%E7%9A%84%E9%80%89%E9%A1%B9%E5%8D%A1

重现步骤

const onDragSort1 = useCallback( () => debounce(({ currentIndex, targetIndex }) => { const temp = tabList1[currentIndex]; tabList1[currentIndex] = tabList1[targetIndex]; tabList1[targetIndex] = temp; setTabList1([...tabList1]); }, 500), [tabList1], );

期望结果

const [onDragSort1] = useState(() => debounce(({ currentIndex, targetIndex }) => setTabList1((pre) => { const newValue = [...pre]; const temp = newValue[currentIndex]; newValue[currentIndex] = newValue[targetIndex]; newValue[targetIndex] = temp; return newValue; }), 500))

实际结果

1

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions]

👋 @zindler323，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[HaixingOoO]

欢迎PR！！！
不过只需要把 debounce 里的函数参数提取给 useCallback 就好了

[zindler323]

我一开始使用时也省去了debounce，但是发现在相邻两个tab交换时，如果拖动过慢会瞬间交换两次，从而有莫名其妙的一个bug。因此最后我还是使用了debounce

[HaixingOoO]

我一开始使用时也省去了debounce，但是发现在相邻两个tab交换时，如果拖动过慢会瞬间交换两次，从而有莫名其妙的一个bug。因此最后我还是使用了debounce

看各自喜欢，防抖或者节流，甚至不用也行，因人而异，但是目前demo使用debounce那就继续使用这个好了，然后欢迎PR来修复目前这个demo的bug！！！

[HaixingOoO]

欢迎PR！！！ 不过只需要把 debounce 里的函数参数提取给 useCallback 就好了

之前没仔细看，没看里面防抖执行的情况，把 useCallback 改成 useMemo 就好了

[zindler323]

把

事实上还存在个函数缓存失效问题。
对于一个[state, setState]=useState(0)
无论是useCallback(() => setState(state + 1), [state]);
还是useMemo(() => () => setState(state + 1)，[state]);
调用一次后，依赖项发生变化，缓存变旧，重新生成。

useCallback(() => setState(pre => ...), [])可能好点。

[HaixingOoO]

這需要你們自己來決定，要麼使用 useRef 來保存，要麼使用useState(pre=>...)也可以，优化的方式有很多

[NWYLZW]

不要在这里用防抖吧，内部的拖拽不感知不到排序回调是否执行成功，默认每次结束都会更新一个最新的 index，导致没办法感知到实际的顺序。
但是在这里我理解应该不存在很高频触发的性能问题，所以对这种支持暂时不在计划之类。