Ant Design
Published by powerfulyang on Feb 22, 2023
使用 Ant Design 的过程中遇到的问题记录
Can't set form initialValues from state
https://github.com/ant-design/ant-design/issues/22372#issuecomment-602102164
像这个大哥提到的,接收到新的 state 之后,reset。
1useEffect(() => form.resetFields(), [form, initialValues]);
或者也可以选择销毁使用 Form.useForm() 的组件,form values 记录在这个钩子中。
@ant-design/pro-table 优化
https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object
声明一个类型替换 ProColumns 优化提示。
1import type { ProColumns } from '@ant-design/pro-components';
2
3type Cons<H, T> = T extends readonly any[]
4 ? ((h: H, ...t: T) => void) extends (...r: infer R) => void
5 ? R
6 : never
7 : never;
8
9type Prev = [
10 never,
11 0,
12 1,
13 2,
14 3,
15 4,
16 5,
17 6,
18 7,
19 8,
20 9,
21 10,
22 11,
23 12,
24 13,
25 14,
26 15,
27 16,
28 17,
29 18,
30 19,
31 20,
32 ...0[],
33];
34
35export type Paths<T, D extends number = 3> = [D] extends [never]
36 ? never
37 : T extends object
38 ? {
39 [K in keyof T]-?:
40 | [K]
41 | (Paths<T[K], Prev[D]> extends infer P ? (P extends [] ? never : Cons<K, P>) : never);
42 }[keyof T]
43 : [];
44
45export type ProColumnDetectType<T> = Omit<ProColumns<T>, 'dataIndex'> & {
46 dataIndex?: Paths<T> | keyof T;
47};
可以在数组中递归提示范型的键。效果如下:
const columns: ProColumnDetectType<{
a: {
b: {
c: 1
}
}
}> = [
{
dataIndex: ['a', 'b', ''] // code complete will suggest `c`
}
]
umi4 或者 @umijs/max 中如何设置 devServer
umi@4 如何配置类似于 devServer 的功能去支持 micro-app?
项目级插件
若你想在项目中快速使用插件的功能(如 修改产物的 html ),可以在项目的根目录创建plugin.ts
编写一个项目级插件,该文件将被自动作为插件加载。
可以通过在根目录创建 plugin.ts,内容如下:
1import type { IApi } from 'umi';
2
3export default (api: IApi) => {
4 // 中间件支持 cors
5 api.addMiddlewares(()=>{
6 return function cors(
7 req,
8 res,
9 next,
10 ) {
11 res.setHeader('Access-Control-Allow-Origin', '*');
12 res.setHeader('Access-Control-Allow-Headers', '*');
13 next();
14 }
15 });
16};
搭配 @micro-zoe/micro-app
食用还会遇到的问题:
Unhandled Rejection (Error): Container initialization failed as it has already been initialized with a different share scope
,需要在 config/config.ts 或者 .umirc.ts 中设置1mfsu: { 2 mfName: 'mfChild', // 默认的会冲突,所以需要随便取个名字避免冲突 3},
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call')
,问题是在两个项目的 package.json 中 name 字段是一样的,只要改掉就 OK- 还会遇到一些稀奇古怪的问题,比如子应用开启 mfsu 的情况下设置了 publicPath,但是基座应用获取的资源时地址 publicPath 不生效
- 解决办法1: 关闭子应用的 mfsu
- 解决办法2: 升级 @micro-zoe/micro-app 到 1.x.x 即 beta 版本