AntDesign, ProComponent使用踩坑

ant-design 官网
ProComponent 官网

背景

最近有个需求迭代要修改中台系统, 该系统是使用 react + ant-design + ProComponent 搭建#的, 记录下遇到的问题

遇到的问题

1. ant-design 设置表单的validator一直显示xxx is not a valid undefined

ant-design 中表单校验默认type都是string, 报错本来想显示的是xxx is not a valid number之类, 如果要检验别的类型检查是否没有配置type, 如下所示:

1
2
3
4
5
6
7
{
min: 1,
max: 10,
transform: (value) => +value,
message: '请输入xx',
// type: 'number', // 需要配置哦
}

2. ProComponent 中 form 表单项设置初始值失败

这个问题, 官方文档已经做了解释, 是我不会看文档(别骂了别骂了):

你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。 你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。

initialValue如果一开始就在columns中定义好是会生效的, 但是我的需求场景是通过请求动态获取initialValue, form 中内部托管了数据处理, 所以下面这样写是不会生效的:

1
2
3
4
5
6
7
8
9
10
11
12
useEffect(() => {
const options = your code;
const columns$: any[] = [...columns];
columns$.splice(2, 1, {
title: 'xxx',
dataIndex: 'xxx',
valueType: 'select',
valueEnum: your code,
initialValue: options,
});
setColumns(columns$);
}, [xxx]);

需要这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// ts
useEffect(() => {
const options = your code;
const columns$: any[] = [...columns];
columns$.splice(2, 1, {
title: 'xxx',
dataIndex: 'xxx',
valueType: 'select',
valueEnum: your code,
});
form.setFieldsValue({ templateTitle: options });
setColumns(columns$);
}, [xxx]);

// tsx
const [form] = useForm();
return (<ProTable form={{ form }} />)

3. ProTable params 变化不触发 request

这个问题我定位了半天, 一直以为是 params 变更比较出了问题, 事实上查阅 issue🐛[BUG] params 更新无法触发 request证明 params 确实也是浅比较, 但是问题并不出在这…
查阅 issue🐛[BUG]pro-table 中如果 request 中有 await,当 params 变更后不会再次触发 request发现, ProTable 的 request 中如果上一个请求还没返回数据, 下一个请求时会被拦截的并不会触发, 然后来看下代码中的逻辑:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ProTable<TableListItem>
{...your other config}
params={{ templateList, systemId, status }}
request={(params, sorter, filter) => {
// if (templateList?.length) {
return queryDocuments({...params});
// }
return {
data: [],
success: true,
total: 0,
};
}}
form={{ form }}
/>

其中 systemIdtemplateList变化都会触发request, 并且更新时间差不多,这就导致systemId触发的 request 还没返回数据, templateList触发的 request 被截断了, 甚至不是阻塞…issue 中大家都觉得这是不合理的, 是个 bug, 但是作者觉得没啥问题…(行 ⑧)

所以 这里需要加个if判断只触发templateList更新时的请求

在 typeorm 中使用 in

需求场景还需要支持多选搜索, 所以原先 sql 中的=需要变更为in, 顺便记录下 typeorm 下的 sql 要怎么写

=

1
2
3
query.andWhere('xxx.templateId = :templateId', { templateId });
// 或
query.andWhere(`xxx.templateId = ${templateId}`);

in

1
query.andWhere('xxx.templateTitle in (:templateTitle)', { templateTitle }); // templateTitle是数组

reference

  1. 🐛[BUG]pro-table 中如果 request 中有 await,当 params 变更后不会再次触发 request
  2. 🐛[BUG] params 更新无法触发 request
  3. ProComponent

AntDesign, ProComponent使用踩坑
https://mariana-yui.github.io/2022/06/09/2022-06-09-ant-design-in-use/
作者
Mariana
发布于
2022年6月9日
许可协议