介绍
为什么我的Modal还没打开，API就开始调用了？不知道大家在使用Ant Design的Modal组件时，是否遇到过这个问题？在某些情况下，我们希望在Modal打开后才开始执行某些操作，比如发起API请求。但是实际的情况时，Modal还没有打开，API请求就已经发起了。今天我们就来揭开这个问题的谜底。
一个例子
先定义一个Modal组件，用来编辑用户信息。这个Modal组件包含如下属性：
isVisible属性，用来控制Modal是否可见。userId属性，用来指定要编辑的用户ID。onOk属性，用来提交表单数据。onCancel属性，用来取消编辑操作。
1
2
3
4
5
6
| type UserEditModalProps = {
isVisible: boolean;
userId: number;
onOk: () => void;
onCancel: () => void;
};
|
接下来，我们定义Modal组件的内容，我们需要在Modal组件中添加一个Form组件，来展示待编辑的用户信息。
组件加载时，我们需要根据传入的userId属性，调用后端api获取用户详情，并使用form.setFieldsValue方法将获取到的用户信息填充到Form中。
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
33
| export default function UserEditModal(props: UserEditModalProps) {
const {isVisible, userId, onOk, onCancel} = props;
const [form] = useForm();
useEffect(() => {
if (userId) {
fetch(`/api/user/detail/${userId}`).then(async (res) => {
const data = await res.json();
form.setFieldsValue(data);
});
}
}, [userId]);
return (
<Modal
open={isVisible}
title="Edit user"
onOk={onOk}
onCancel={onCancel}>
<Form form={form}>
<Form.Item label='User name' name='userName'>
<Input placeholder='Enter user name' />
</Form.Item>
<Form.Item label='Email' name='email'>
<Input placeholder='Enter email' />
</Form.Item>
<Form.Item label='Phone' name='phone'>
<Input placeholder='Enter phone number' />
</Form.Item>
</Form>
</Modal>
);
}
|
调用Modal组件
现在我们可以在其他组件中调用这个Modal组件了。调用的方式很简单：
- 将
UserEditModal组件放在父组件中(通常放到组件的末尾)。
- 在父组件中定义一个状态变量
isEditModalVisible，用来控制Modal的显示和隐藏。
代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
| const [isEditModalVisible, setIsEditModalVisible] = useState(false);
return (
<>
{/* 其他组件内容 */}
<UserEditModal
isVisible={isEditModalVisible}
userId={selectedUser?.id}
onOk={onEditOK}
onCancel={onEditCancel}/>
</>
);
|
当我们需要显示Modal时，只需要将isEditModalVisible设置为true即可。
1
2
3
4
| const onEditUser = (userId: number) => {
setSelectedUser(users.find(user => user.id === userId));
setIsEditModalVisible(true);
};
|
当我们需要隐藏Modal时，只需要将isEditModalVisible设置为false即可。
1
2
3
| const onEditCancel = () => {
setIsEditModalVisible(false);
};
|
运行程序
此时，我们运行程序，你会发现，即使Modal还没有打开，API请求已经发起了。这是因为useEffect钩子在组件加载时就会执行，而不管Modal是否可见。
为了解决这个问题，我们需要在useEffect中添加一个条件判断，只有当Modal可见时才发起API请求。
1
2
3
4
5
| useEffect(() => {
if (isVisible && userId) {
fetch(...);
}
}, [isVisible, userId]);
|
其实上面的代码是双保险，只有当Modal可见且userId存在时，才会发起API请求。这样就可以确保在Modal打开后才开始执行相关操作。
总结
使用Ant Design中的Modal组件时，一定要在组件可见时在发起API请求。通过在useEffect中添加条件判断，我们可以确保在Modal打开后才开始执行相关操作。从而避免不必要的API请求。
