motion
motion copied to clipboard
fix: remove delete statement on render for react 18
解决的问题:
在React18中,在render里面操作delete容易导致意外的情况
问题描述:
在给antd迁移upload的测试库到testing-lib的时候
发现下面的用例修改完语法之后在React18中一直无法通过测试
https://github.com/ant-design/ant-design/blob/master/components/upload/tests/uploadlist.test.js#L112-L152
uid为0的记录在删除时一直处在animate-leave-active
的状态
调试过程中发现为CSSMotionList在调用CSSMotion组件时传入的onVisibleChange偶尔会变成undifined导致的问题
https://github.com/react-component/motion/blob/59dc90cd3645f9dfa95d4e7df68a5f06f3884e85/src/CSSMotionList.tsx#L143-L159
在测试用例中打印下图中的props.onVisibleChange会发现在某一时间点之后成了undefined,导致节点删不掉
https://github.com/react-component/motion/blob/59dc90cd3645f9dfa95d4e7df68a5f06f3884e85/src/CSSMotion.tsx#L154-L159
解决方法:
将CSSMotionList.tsx里render中的delete操作替换为不修改原对象的取值操作,测试即可通过
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Updated |
---|---|---|---|
motion | ✅ Ready (Inspect) | Visit Preview | Jun 14, 2022 at 8:26AM (UTC) |
Codecov Report
Merging #31 (0cf9987) into master (59dc90c) will increase coverage by
0.01%
. The diff coverage is100.00%
.
@@ Coverage Diff @@
## master #31 +/- ##
==========================================
+ Coverage 98.33% 98.34% +0.01%
==========================================
Files 11 12 +1
Lines 360 363 +3
Branches 98 98
==========================================
+ Hits 354 357 +3
Misses 6 6
Impacted Files | Coverage Δ | |
---|---|---|
src/CSSMotionList.tsx | 100.00% <100.00%> (ø) |
|
src/util/pick.ts | 100.00% <100.00%> (ø) |
:mega: Codecov can now indicate which changes are the most critical in Pull Requests. Learn more
@zombieJ 看看?
@zombieJ