tdesign-react
tdesign-react copied to clipboard
fix(color-picker): 修复useRef缓存引起的color实例内部属性未更新,导致的在Form中reset引起的死循环
🤔 这个 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由于缓存问题和实际颜色不一致:
导致color实例的update方法没有进行更新:
所以ColorPanel的useEffect中颜色对比不一致,导致update方法会循环触发:
4、原因是在ColorPicker重绘时,useRef中使用的对象有奇妙的缓存问题:
新的color实例在useRef的时候originColor属性被还原了...
📝 更新日志
-
fix(组件color-picker): 修复useRef缓存引起的color实例内部属性未更新,导致的在Form中reset引起的死循环
-
[ ] 本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️
- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供
这个只修复Popup使用的场景,不修复panel本身的问题,关掉了
