---
title: Ant Design
date: 2023-02-22
public: true
summary: 使用 Ant Design 的过程中遇到的问题记录
posterId: 47881
tags:
    - antd
---

## Can't set form initialValues from state

> https://github.com/ant-design/ant-design/issues/22372#issuecomment-602102164

像这个大哥提到的，接收到新的 state 之后，reset。
```js
useEffect(() => 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
import type { ProColumns } from '@ant-design/pro-components';

type Cons<H, T> = T extends readonly any[]
  ? ((h: H, ...t: T) => void) extends (...r: infer R) => void
    ? R
    : never
  : never;

type Prev = [
  never,
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20,
  ...0[],
];

export type Paths<T, D extends number = 3> = [D] extends [never]
  ? never
  : T extends object
  ? {
      [K in keyof T]-?:
        | [K]
        | (Paths<T[K], Prev[D]> extends infer P ? (P extends [] ? never : Cons<K, P>) : never);
    }[keyof T]
  : [];

export type ProColumnDetectType<T> = Omit<ProColumns<T>, 'dataIndex'> & {
  dataIndex?: Paths<T> | keyof T;
};
```
可以在数组中递归提示范型的键。效果如下:
```
const columns: ProColumnDetectType<{
    a: {
        b: {
            c: 1
        }
    }
}> = [
    {
        dataIndex: ['a', 'b', ''] // code complete will suggest `c`
    }
]
```

## umi4 或者 @umijs/max 中如何设置 devServer

umi@4 如何配置类似于 devServer 的功能去支持 micro-app?  
> [项目级插件](https://umijs.org/docs/guides/use-plugins#%E9%A1%B9%E7%9B%AE%E7%BA%A7%E6%8F%92%E4%BB%B6)  
若你想在项目中快速使用插件的功能（如 [修改产物的 html](https://umijs.org/docs/introduce/faq#documentejs-%E5%8E%BB%E5%93%AA%E4%BA%86%E5%A6%82%E4%BD%95%E8%87%AA%E5%AE%9A%E4%B9%89-html-%E6%A8%A1%E6%9D%BF) ），可以在项目的根目录创建 `plugin.ts` 编写一个项目级插件，该文件将被自动作为插件加载。

可以通过在根目录创建 plugin.ts，内容如下:
```ts
import type { IApi } from 'umi';

export default (api: IApi) => {
  // 中间件支持 cors
  api.addMiddlewares(()=>{
    return function cors(
      req,
      res,
      next,
    ) {
      res.setHeader('Access-Control-Allow-Origin', '*');
      res.setHeader('Access-Control-Allow-Headers', '*');
      next();
    }
  });
};
```

Ant Design

---
title: Ant Design
date: 2023-02-22
public: true
summary: 使用 Ant Design 的过程中遇到的问题记录
posterId: 47881
tags:
    - antd
---

## Can't set form initialValues from state

> https://github.com/ant-design/ant-design/issues/22372#issuecomment-602102164

像这个大哥提到的，接收到新的 state 之后，reset。
```js
useEffect(() => 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
import type { ProColumns } from '@ant-design/pro-components';

type Cons<H, T> = T extends readonly any[]
  ? ((h: H, ...t: T) => void) extends (...r: infer R) => void
    ? R
    : never
  : never;

type Prev = [
  never,
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20,
  ...0[],
];

export type Paths<T, D extends number = 3> = [D] extends [never]
  ? never
  : T extends object
  ? {
      [K in keyof T]-?:
        | [K]
        | (Paths<T[K], Prev[D]> extends infer P ? (P extends [] ? never : Cons<K, P>) : never);
    }[keyof T]
  : [];

export type ProColumnDetectType<T> = Omit<ProColumns<T>, 'dataIndex'> & {
  dataIndex?: Paths<T> | keyof T;
};
```
可以在数组中递归提示范型的键。效果如下:
```
const columns: ProColumnDetectType<{
    a: {
        b: {
            c: 1
        }
    }
}> = [
    {
        dataIndex: ['a', 'b', ''] // code complete will suggest `c`
    }
]
```

## umi4 或者 @umijs/max 中如何设置 devServer

umi@4 如何配置类似于 devServer 的功能去支持 micro-app?  
> [项目级插件](https://umijs.org/docs/guides/use-plugins#%E9%A1%B9%E7%9B%AE%E7%BA%A7%E6%8F%92%E4%BB%B6)  
若你想在项目中快速使用插件的功能（如 [修改产物的 html](https://umijs.org/docs/introduce/faq#documentejs-%E5%8E%BB%E5%93%AA%E4%BA%86%E5%A6%82%E4%BD%95%E8%87%AA%E5%AE%9A%E4%B9%89-html-%E6%A8%A1%E6%9D%BF) ），可以在项目的根目录创建 `plugin.ts` 编写一个项目级插件，该文件将被自动作为插件加载。

可以通过在根目录创建 plugin.ts，内容如下:
```ts
import type { IApi } from 'umi';

export default (api: IApi) => {
  // 中间件支持 cors
  api.addMiddlewares(()=>{
    return function cors(
      req,
      res,
      next,
    ) {
      res.setHeader('Access-Control-Allow-Origin', '*');
      res.setHeader('Access-Control-Allow-Headers', '*');
      next();
    }
  });
};
```

搭配 `@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
  mfsu: {
    mfName: 'mfChild', // 默认的会冲突，所以需要随便取个名字避免冲突
  },
  ```
+ `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 @ Thu, Mar 16, 2023 4:27 PM		Ant Design @ Fri, Mar 17, 2023 11:11 PM
	Expand 111 lines ...
112	`});`	112		`});`
113	`};`	113		`};`
114	```	114		```
		115	+
		116	+	搭配 `@micro-zoe/micro-app` 食用还会遇到的问题:
		117	+	+ `Unhandled Rejection (Error): Container initialization failed as it has already been initialized with a different share scope`，需要在 config/config.ts 或者 .umirc.ts 中设置
		118	+	```ts
		119	+	`mfsu: {`
		120	+	`mfName: 'mfChild', // 默认的会冲突，所以需要随便取个名字避免冲突`
		121	+	`},`
		122	+	```
		123	+	+ `Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call')`，问题是在两个项目的 package.json 中 name 字段是一样的，只要改掉就 OK
		124	+	`+ 还会遇到一些稀奇古怪的问题，比如子应用开启 mfsu 的情况下设置了 publicPath，但是基座应用获取的资源时地址 publicPath 不生效`
		125	+	`+ 解决办法1: 关闭子应用的 mfsu`
		126	+	`+ 解决办法2: 升级 @micro-zoe/micro-app 到 1.x.x 即 beta 版本`