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
42            ? P extends []
43              ? never
44              : Cons<K, P>
45            : never);
46    }[keyof T]
47  : [];
48
49export type ProColumnDetectType<T> = Omit<ProColumns<T>, "dataIndex"> & {
50  dataIndex?: Paths<T> | keyof T;
51};

可以在数组中递归提示范型的键。效果如下:

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(req, res, next) {
7      res.setHeader("Access-Control-Allow-Origin", "*");
8      res.setHeader("Access-Control-Allow-Headers", "*");
9      next();
10    };
11  });
12};

搭配 @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 版本

关于 ant design 中 Upload 组件表单中获取 file content，表单使用 FormData 提交

ts
1<ProFormUploadButton
2  fieldProps={{
3    beforeUpload: () => {
4      return false;
5    },
6  }}
7  label="上传合同"
8  max={1}
9  accept=".xlsx,.xls"
10  name="file"
11  rules={[
12    {
13      required: true,
14    },
15  ]}
16  extra={
17    <Typography.Link target="_blank" href="/api/order/import-template/download">
18      模板下载
19    </Typography.Link>
20  }
21/>;

使用上面的代码，beforeUpload 返回 false，然后提交时使用 values.file = values.file[0].originFileObj; 来获取 file content。