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

[Table] Table组件使用filter功能时存在问题 #3196

Open
2ue opened this issue Nov 13, 2024 · 1 comment
Open

[Table] Table组件使用filter功能时存在问题 #3196

2ue opened this issue Nov 13, 2024 · 1 comment
Labels
to be published fixed, not be published

Comments

@2ue
Copy link

2ue commented Nov 13, 2024

tdesign-react 版本

1.9.3

重现链接

https://stackblitz.com/edit/react-lnjtpr?file=src%2Fdemo.tsx

重现步骤

Table组件中column启用fiter功能,并且TableProps上绑定了受控filterValue属性,如果绑定的filterValue属性包含了null值则会报错,导致页面白屏,复现步骤:

1、下拉选择随意选择一个平台,然后点击clear图标清除值
2、点击搜索

打断点发现,Select单选组件clear后返回的值数null,导致table组件的useFilter hooks中的isFilterValueExist方法报错,因为其对Object的判断存在问题,其内实现的IsObject方法不能判断出null导致Object.keys(value).length报错。

并且还发现其他问题:如果值为字符串undefined和字符串null会导致误判,误判代码:

['null', '', 'undefined'].includes(String(value))
image

建议优化代码:

function isFilterValueExist(value: any) {
  const isArrayTrue = value instanceof Array && value.length;
  const isObject = typeof value === 'object' && !(value instanceof Array);
  const isObjectTrue = isObject && Object.keys(value || {}).length;
  return isArrayTrue || isObjectTrue || ![null, '', undefined].includes(value);
}

相关pr:
#3197

期望结果

期望能正常处理null,字符串null和字符串undefined

实际结果

在处理null时会报错

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

Copy link
Contributor

👋 @2ue,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

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

No branches or pull requests

2 participants