Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: remove delete statement on render for react 18 #31

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

yykoypj
Copy link

@yykoypj yykoypj commented Jun 14, 2022

解决的问题:

在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的状态
image
调试过程中发现为CSSMotionList在调用CSSMotion组件时传入的onVisibleChange偶尔会变成undifined导致的问题

<CSSMotion
{...motionProps}
key={eventProps.key}
visible={visible}
eventProps={eventProps}
onVisibleChanged={changedVisible => {
onVisibleChanged?.(changedVisible, { key: eventProps.key });
if (!changedVisible) {
const restKeysCount = this.removeKey(eventProps.key);
if (restKeysCount === 0 && onAllRemoved) {
onAllRemoved();
}
}
}}
>

在测试用例中打印下图中的props.onVisibleChange会发现在某一时间点之后成了undefined,导致节点删不掉

motion/src/CSSMotion.tsx

Lines 154 to 159 in 59dc90c

const [status, statusStep, statusStyle, mergedVisible] = useStatus(
supportMotion,
visible,
getDomElement,
props,
);

解决方法:

将CSSMotionList.tsx里render中的delete操作替换为不修改原对象的取值操作,测试即可通过

@vercel
Copy link

vercel bot commented Jun 14, 2022

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
Copy link

codecov bot commented Jun 14, 2022

Codecov Report

Merging #31 (0cf9987) into master (59dc90c) will increase coverage by 0.01%.
The diff coverage is 100.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%> (ø)

📣 Codecov can now indicate which changes are the most critical in Pull Requests. Learn more

@afc163 afc163 requested a review from zombieJ December 27, 2022 10:37
@afc163
Copy link
Member

afc163 commented Jan 9, 2023

@zombieJ 看看?

@afc163
Copy link
Member

afc163 commented Feb 6, 2023

@zombieJ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants