【图文并茂】ant design pro 如何统一封装好 ProFormSelect 的查询请求



你仔细看上面的图片吧

经常有这样的需求吧。

这些列表都是查询出来的。

后端

你的后端必须要有 api 。

c 复制代码
const getUsers = handleAsync(async (req: Request, res: Response) => {
  const { email, name, live, current = '1', pageSize = '10' } = req.query;

  const query: any = {};

  if (email) {
    query.email = email;
  }

  if (name) {
    query.name = { $regex: name, $options: 'i' };
  }

  if (live) {
    query.live = live === 'true';
  }

  // 执行查询
  const users = await User.find({
    ...query,
  })
    .populate('roles')
    .sort('-createdAt') // Sort by creation time in descending order
    .skip((+current - 1) * +pageSize)
    .limit(+pageSize)
    .exec();

  const total = await User.countDocuments({
    ...query,
  }).exec();

  res.json({
    success: true,
    data: users.map((user) => exclude(user.toObject(), 'password')),
    total,
    current: +current,
    pageSize: +pageSize,
  });
});

很简单理解,你只要查询好数据库把列表返回就行

至于分页,你可以跳过的,把每页的数量弄大一些传过来就行。后面会提到。

前端

前端只要把 ProFormSelect 组件放上去

c 复制代码
import { ProFormSelect } from '@ant-design/pro-components';
import React from 'react';
import { useIntl } from '@umijs/max';
import useQueryList from '@/hooks/useQueryList';

const UserSelect: React.FC = () => {
  const intl = useIntl();
  const { items: users, loading } = useQueryList('/users');

  const filteredUsers = users.filter(
    (user: any) =>
      user.role !== 'ADMIN' && user.role !== 'ORDER_PLACER' && user.role !== 'REVIEWER',
  );

  return (
    <ProFormSelect
      rules={[{ required: true }]}
      options={filteredUsers.map((user: any) => ({
        label: user.name,
        value: user._id,
      }))}
      width="md"
      name="user"
      label={intl.formatMessage({ id: 'user' })}
      showSearch
      fieldProps={{ loading }}
    />
  );
};

export default UserSelect;

useQueryList

这里有两个东西要注意

第一

c 复制代码
  const { items: users, loading } = useQueryList('/users');

这个地方主要就是发请求了。

这里做了统一封装

src/hooks/useQueryList.ts

c 复制代码
import { useEffect, useState } from 'react';
import { queryList } from '@/services/ant-design-pro/api';

const useQueryList = (url: string, hasPermission = true) => {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);

  const query = async () => {
    setLoading(true);
    // Only proceed with the API call if the user has permission
    if (hasPermission) {
      const response = (await queryList(url, { pageSize: 10000 })) as any;
      if (response.success) {
        setItems(response.data);
      }
    }
    setLoading(false);
  };

  useEffect(() => {
    query().catch(console.error);
  }, [hasPermission]); // Adding `hasPermission` to the dependency array to re-run the effect if it changes

  return { items, setItems, loading };
};

export default useQueryList;

loading

fieldProps={{ loading }}

数据没出来前是有个 loading 显示的

跟这里的刚才结合了:

c 复制代码
  const { items: users, loading } = useQueryList('/users');

完结

相关推荐
贵沫末10 分钟前
React——基础
前端·react.js·前端框架
aklry21 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9329 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子29 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982430 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug32 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo32 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan32 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js