react-ant-design-modal-case1

介绍

为什么我的Modal还没打开，API就开始调用了？不知道大家在使用Ant Design的Modal组件时，是否遇到过这个问题？在某些情况下，我们希望在Modal打开后才开始执行某些操作，比如发起API请求。但是实际的情况时，Modal还没有打开，API请求就已经发起了。今天我们就来揭开这个问题的谜底。

一个例子

先定义一个Modal组件，用来编辑用户信息。这个Modal组件包含如下属性：

isVisible属性，用来控制Modal是否可见。
userId属性，用来指定要编辑的用户ID。
onOk属性，用来提交表单数据。
onCancel属性，用来取消编辑操作。

type UserEditModalProps = {
  isVisible: boolean;
  userId: number; 
  onOk: () => void;
  onCancel: () => void;
};

接下来，我们定义Modal组件的内容，我们需要在Modal组件中添加一个Form组件，来展示待编辑的用户信息。

组件加载时，我们需要根据传入的userId属性，调用后端api获取用户详情，并使用form.setFieldsValue方法将获取到的用户信息填充到Form中。

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的显示和隐藏。

代码如下：

const [isEditModalVisible, setIsEditModalVisible] = useState(false);

return (
  <>
    {/* 其他组件内容 */}
    <UserEditModal 
      isVisible={isEditModalVisible} 
      userId={selectedUser?.id} 
      onOk={onEditOK} 
      onCancel={onEditCancel}/>
  </>
);

当我们需要显示Modal时，只需要将isEditModalVisible设置为true即可。

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请求。

useEffect(() => {
  if (isVisible && userId) {
    fetch(...);
  }
}, [isVisible, userId]);

其实上面的代码是双保险，只有当Modal可见且userId存在时，才会发起API请求。这样就可以确保在Modal打开后才开始执行相关操作。

总结

使用Ant Design中的Modal组件时，一定要在组件可见时在发起API请求。通过在useEffect中添加条件判断，我们可以确保在Modal打开后才开始执行相关操作。从而避免不必要的API请求。