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(table): resolve EditableProTable Form.Item shouldUpdate conflict #8986

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

Conversation

drizzlesconsin
Copy link
Contributor

描述

修复 EditableProTable 的 Form.Item 中 shouldUpdate 与 dependencies 的冲突问题。

目前,当使用带有 name 属性的 EditableProTable 时,如果我们想在 formItemProps 中使用 dependencies,会出现以下警告:

warning(
  !(shouldUpdate && dependencies),
  'usage',
  "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/form-deps.",
);

这是因为 EditableProTable 内置的 shouldUpdate 逻辑与 dependencies 产生了冲突。

解决方案

将默认的 shouldUpdate 移到 {...props?.formItemProps} 前面,这样用户的配置就可以覆盖默认值:

return (
  <Form.Item
    style={{
      maxWidth: '100%',
    }}
+   shouldUpdate={(prev, next) => {
+     const name = [props.name].flat(1) as string[];
+     try {
+       return JSON.stringify(get(prev, name)) !== JSON.stringify(get(next, name));
+     } catch (error) {
+       return true;
+     }
+   }}
    {...props?.formItemProps}
    name={props.name}
-   shouldUpdate={(prev, next) => {
-     const name = [props.name].flat(1) as string[];
-     try {
-       return JSON.stringify(get(prev, name)) !== JSON.stringify(get(next, name));
-     } catch (error) {
-       return true;
-     }
-   }}
  >
    {/* ... */}
  </Form.Item>
);

修改后可以:

  1. 通过设置 shouldUpdate={undefined} 来正常使用 dependencies={[name, 'other field']}
  2. 如果需要,可以覆盖默认的 shouldUpdate 行为,自行实现 update
  3. 使用 dependencies 时不会再有警告

使用示例

<EditableProTable
  name="table"
  formItemProps={{
    dependencies: ['table', 'other'],
    shouldUpdate: undefined,  // 避免警告
  }}
/>

Copy link

github-actions bot commented Jan 22, 2025

😭 Deploy PR Preview failed.

Copy link

pkg-pr-new bot commented Jan 22, 2025

@ant-design/pro-card

npm i https://pkg.pr.new/@ant-design/pro-card@8986

@ant-design/pro-descriptions

npm i https://pkg.pr.new/@ant-design/pro-descriptions@8986

@ant-design/pro-components

npm i https://pkg.pr.new/@ant-design/pro-components@8986

@ant-design/pro-field

npm i https://pkg.pr.new/@ant-design/pro-field@8986

@ant-design/pro-form

npm i https://pkg.pr.new/@ant-design/pro-form@8986

@ant-design/pro-layout

npm i https://pkg.pr.new/@ant-design/pro-layout@8986

@ant-design/pro-list

npm i https://pkg.pr.new/@ant-design/pro-list@8986

@ant-design/pro-skeleton

npm i https://pkg.pr.new/@ant-design/pro-skeleton@8986

@ant-design/pro-table

npm i https://pkg.pr.new/@ant-design/pro-table@8986

@ant-design/pro-provider

npm i https://pkg.pr.new/@ant-design/pro-provider@8986

@ant-design/pro-utils

npm i https://pkg.pr.new/@ant-design/pro-utils@8986

commit: 190d38c

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.

1 participant