React之使用 ant design搭建后台管理之踩坑
最近，想着使用 ant design 搭一个后台管理的模板，中间踩了许多坑，特此记录下。
- 1、登录的时候，需要点击按钮发送验证码，然后有 60 秒的倒计时功能，结果定时器是在跑，但是数字却没有变。
原因：定时器在运行的同时，导致状态的变更，继而导致组件重新渲染，状态被重置了，如此循环反复，所以状态一直都是 60 没有变。
解决办法：使用 ref 来保存状态
const count = useRef(60)
const [btnTxt, setBtnTxt] = useState("发送验证码");
const timer = setInterval(() => {
count.current -= 1
if (count.current <= 0) {
setBtnTxt("重新发送")
setIsSend(false)
count.current = 60
clearInterval(timer)
return;
}
setBtnTxt(`${count.current}秒后重新发送`)
}, 1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2、使用 ant design 的 Menu 组件设置出使选中和展开项时，静态写死是可以的，但是动态设置就不生效，或者要么出使选中跟展开是对的，再次点击就点击不了甚至报错。
原因：使用方法不对，初始展开应该用 openKeys 字段，选中应该用 selectedKeys 字段，并且必须搭配 onOpenChange 事件
/*
例如当前选中的导航数据是这样的
findItem = {
children: []
parentid: 6
resid: 62
resourceattr: ""
resourceicon: null
resourcename: "用户列表"
resourceurl: "/userList"
sort: 1
}
*/
const [defaultSelected, setSelectedKeys] = useState<any>([]);
const [defaultOpen, setOpenKeys] = useState<any>([]);
useEffect(() => {
// .....这里先判断当前激活的是哪一个菜单项，然后再设置
// 这里应该与菜单栏时的key数据类型对应，如果菜单栏的key是数值型，这里也应该是数值型
setSelectedKeys([findItem.resid + ''])
setOpenKeys([findItem.parentid + ''])
}, [])
<Menu
selectedKeys = {defaultSelected}
openKeys = {defaultOpen}
onOpenChange = {e => setOpenKeys(e)}
mode = "inline"
theme = 'dark'
items = {menuData}
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
3、在 Form 表单组件中使用 Switch，无法设置默认值
const [form] = Form.useForm()
/*
发送请求拿到数据，并赋值，此时请求返给的isdisable值为0或1，0选中，1未选中
所以需要先将isdisable的值转换一下
Form.Item 默认绑定值属性到 value 上，而 Switch 的值属性为 checked。需要通过 valuePropName 来修改绑定的值属性。
*/
data.isdisable = data.isdisable === 0 ? true : false
form.setFieldsValue(data)
<Form
form={form}
labelCol={ { span: 4 } }
initialValues={ { isdisable: form.getFieldValue('isdisable') } }
>
<Form.Item
label="状态"
name="isdisable"
valuePropName="checked">
<Switch checkedChildren="启用" unCheckedChildren="禁用" />
</Form.Item>
</Form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
4、在 Tree 组件中，使用 expandedKeys 后，点击父节点无法收起
解决办法，需要搭配 onExpand 事件一起使用
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([])
const [treeData, setTreeData] = useState<any[]>([])
<Tree
blockNode={true}
draggable
expandedKeys={expandedKeys}
treeData={treeData}
onExpand={(expandedKeys: React.Key[]) => {
setExpandedKeys(expandedKeys)
}}
></Tree>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
5、由于 Ant Design 默认文案是英文的，如果需要切换语言，需要自行配置，好在其提供了 ConfigProvider 组件可以全局配置
import zhCN from 'antd/locale/zh_CN';
// for date-picker i18n
import 'dayjs/locale/zh-cn';
return (
<ConfigProvider locale={zhCN}>
<App />
</ConfigProvider>
);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
照着官方文档一顿操作，不出意外的话，意外就要出现了，报错了，我这里使用的是 vite 构建工具，当我引入中文包后，就一直报错，ERR_ABORTED 504 (Outdated Optimize Dep)，解决该错误，需要通过配置优化选项来解决，在 vite.config.ts 中增加如下配置
optimizeDeps: {
include: ['antd/locale/zh_CN'],
},
1
2
3
2
3
编辑 (opens new window)
上次更新: 3/4/2025, 5:46:30 PM