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.

Sign up for GitHub

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

Jump to bottom

受控的Select组件，onChange中setValue为undefiend后，展示的label与实际的值不一致 #49157

Closed
JackWang032 opened this issue May 31, 2024 · 5 comments · May be fixed by react-component/select#1049
Closed

受控的Select组件，onChange中setValue为undefiend后，展示的label与实际的值不一致 #49157

JackWang032 opened this issue May 31, 2024 · 5 comments · May be fixed by react-component/select#1049
Labels
unconfirmed

Comments

@JackWang032
Copy link

Reproduction link

Edit on StackBlitz

Steps to reproduce

受控下拉框无初始值, 当我选择某个选项后，在onChange中会判断是否要数据变更，如果不进行数据变更，则保持value不变(不进行setValue或者setValue为undefiend)，这时展示的label还为所选的label而非空

What is expected?

与value保持一致

What is actually happening?

会将所选的label展示出来，但实际值还是空的， 尝试重新渲染后还是一样，如果setValue为null则不会出现该情况

Environment Info
antd 5.17.4
React 18
System mac
Browser Chrome v116.0.5845.110

实际业务场景为：一个表格列表中，有很多下拉框，选完后如果列表已存在该值，则保持原来的值并进行提示，如果这个下拉框一开始就是空值，那么就会遇到上述情况
@stackblitz StackBlitz
Copy link

stackblitz bot commented May 31, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@JackWang032
Copy link
Author

image

@QDyanbing
Copy link

value={value || null}这样应该能先解决；估计是value为undefined的时候被识别成了非受控模式，change的时候触发了内部改变逻辑

QDyanbing pushed a commit to QDyanbing/select that referenced this issue May 31, 2024
fix: ant-design/ant-design#49157
58592fc
@QDyanbing QDyanbing mentioned this issue May 31, 2024
Open
@MadCcc
Copy link
Member

MadCcc commented Jun 5, 2024

用 null 代替 undefined

@MadCcc MadCcc closed this as completed Jun 5, 2024
@zombieJ
Copy link
Member

zombieJ commented Jun 5, 2024

undefined 就是表示非受控，要设置空值用 null。对 setState(undefined) 而言，从 undefined 到 undefined 并不会触发 React 更新。对其本身就是非受控。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
unconfirmed
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: https://github.com/ant-design/ant-design/issues/49157 QDyanbing/select
4 participants
@zombieJ @MadCcc @JackWang032 @QDyanbing