tdesign-react icon indicating copy to clipboard operation
tdesign-react copied to clipboard

fix(color-picker): 修复useRef缓存引起的color实例内部属性未更新,导致的在Form中reset引起的死循环

Open huangchen1031 opened this issue 1 year ago • 1 comments

🤔 这个 PR 的性质是?

  • [x] 日常 bug 修复
  • [ ] 新特性提交
  • [ ] 文档改进
  • [ ] 演示代码改进
  • [ ] 组件样式/交互改进
  • [ ] CI/CD 改进
  • [ ] 重构
  • [ ] 代码风格优化
  • [ ] 测试用例
  • [ ] 分支合并
  • [ ] 其他

🔗 相关 Issue

tdesign-react , Form 和 ColorPicker 一起用时,重置表单会直接进入死循环渲染,下面的例子,选颜色后,点重置,死循环渲染了 。 https://stackblitz.com/edit/react-fy5y49?file=src%2Fdemo.tsx

💡 需求背景和解决方案

1、在Form中reset事件会重置ColorPicker的value属性; 2、在ColorPanel中value变化会调用update方法; 3、colorInstanceRef中的originColor由于缓存问题和实际颜色不一致: image 导致color实例的update方法没有进行更新: image 所以ColorPanel的useEffect中颜色对比不一致,导致update方法会循环触发: image 4、原因是在ColorPicker重绘时,useRef中使用的对象有奇妙的缓存问题: image 新的color实例在useRef的时候originColor属性被还原了...

📝 更新日志

  • fix(组件color-picker): 修复useRef缓存引起的color实例内部属性未更新,导致的在Form中reset引起的死循环

  • [ ] 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

  • [x] 文档已补充或无须补充
  • [x] 代码演示已提供或无须提供
  • [x] TypeScript 定义已补充或无须补充
  • [x] Changelog 已提供或无须提供

huangchen1031 avatar Sep 27 '24 07:09 huangchen1031

失败

github-actions[bot] avatar Sep 27 '24 07:09 github-actions[bot]

这个只修复Popup使用的场景,不修复panel本身的问题,关掉了

huangchen1031 avatar Nov 29 '24 08:11 huangchen1031