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。

js
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 优化提示。

ts
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，内容如下:

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 中设置
    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 版本