在前面的文章中，我们学习了 React 的基本概念、Hooks、Context、路由管理、React Query 进行数据管理的方法，并介绍了 Ant Design（antd）的使用。本篇文章将结合 React Query 和 Ant Design，构建一个高效的 CRUD（增删改查）数据交互界面。

1. 为什么要结合 React Query 与 Ant Design？

在实际开发中，前端需要与后端 API 进行交互，常见的场景包括：

  • 获取数据（如用户列表）
  • 分页与搜索（如带有筛选条件的查询）
  • 数据变更（如新增、更新、删除）

React Query 负责管理数据的获取、缓存、同步和更新，而 Ant Design 提供丰富的 UI 组件，二者结合可以大幅提高开发效率，使数据交互更加流畅。 

2. 搭建环境

在 React 项目中安装 react-query 以及 antd：

npm install @tanstack/react-query antd axios

或者使用 Yarn：

yarn add @tanstack/react-query antd axios

3. 使用 React Query 获取用户数据

我们创建一个 用户管理系统，并使用 React Query 进行数据管理。

3.1 配置 React Query

首先，我们在 App.tsx 中配置 QueryClientProvider：

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import UserList from './UserList';

const queryClient = new QueryClient();

const App: React.FC = () => (
  <QueryClientProvider client={queryClient}>
    <UserList />
  </QueryClientProvider>
);

export default App;

4. 构建用户管理页面

创建 UserList.tsx，使用 React Query 获取用户数据，并结合 Ant Design 进行展示。

4.1 使用 useQuery 获取用户数据

import React from 'react';
import { Table, Button, message } from 'antd';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

interface User {
  id: number;
  name: string;
  email: string;
}

const fetchUsers = async (): Promise<User[]> => {
  const { data } = await axios.get('/api/users'); // 这里使用后端 API
  return data;
};

const UserList: React.FC = () => {
  const queryClient = useQueryClient();

  // 获取用户数据
  const { data: users, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });

  // 删除用户的 Mutation
  const deleteMutation = useMutation({
    mutationFn: async (id: number) => {
      await axios.delete(`/api/users/${id}`);
    },
    onSuccess: () => {
      message.success('删除成功');
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });

  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '邮箱', dataIndex: 'email', key: 'email' },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: User) => (
        <Button type="link" danger onClick={() => deleteMutation.mutate(record.id)}>
          删除
        </Button>
      ),
    },
  ];

  if (isLoading) return <p>加载中...</p>;
  if (error) return <p>获取数据失败</p>;

  return <Table columns={columns} dataSource={users} rowKey="id" />;
};

export default UserList;

4.2 代码解析

  • useQuery 负责获取用户数据，并缓存请求结果。
  • useMutation 处理 删除操作，并在成功后调用 invalidateQueries 使数据重新请求，实现自动更新。
  • Table 组件用于显示用户列表，删除按钮调用 deleteMutation.mutate(id) 进行数据变更。

5. 添加与更新用户

接下来，我们扩展 UserList.tsx，加入 新增用户 和 编辑用户 的功能。

5.1 添加用户

const addMutation = useMutation({
  mutationFn: async (user: Omit<User, 'id'>) => {
    const { data } = await axios.post('/api/users', user);
    return data;
  },
  onSuccess: () => {
    message.success('用户添加成功');
    queryClient.invalidateQueries({ queryKey: ['users'] });
  },
});

调用 addMutation.mutate() 触发新增操作，并在成功后刷新数据。

5.2 编辑用户

const updateMutation = useMutation({
  mutationFn: async (user: User) => {
    await axios.put(`/api/users/${user.id}`, user);
  },
  onSuccess: () => {
    message.success('用户信息更新成功');
    queryClient.invalidateQueries({ queryKey: ['users'] });
  },
});

调用 updateMutation.mutate(user) 触发更新操作，成功后刷新数据。

6. 结合 Modal 实现新增/编辑用户

在 UserList.tsx 组件中，添加 Modal 组件，并结合 Form 处理数据：

import { Modal, Form, Input } from 'antd';

// 模态框状态管理
const [isModalVisible, setIsModalVisible] = useState(false);
const [form] = Form.useForm();

const handleAddUser = () => {
  form.validateFields().then(values => {
    addMutation.mutate(values);
    setIsModalVisible(false);
    form.resetFields();
  });
};

<Modal
  title="添加用户"
  open={isModalVisible}
  onCancel={() => setIsModalVisible(false)}
  onOk={handleAddUser}
>
  <Form form={form} layout="vertical">
    <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
      <Input />
    </Form.Item>
    <Form.Item name="email" label="邮箱" rules={[{ required: true }]}>
      <Input />
    </Form.Item>
  </Form>
</Modal>;

点击 "添加用户" 按钮，弹出 Modal，填写信息后提交数据。

7. 总结

本篇博客介绍了 如何结合 React Query 和 Ant Design 构建数据交互界面，并实现了： ✅ 获取数据（useQuery）
✅ 新增用户（useMutation）
✅ 更新用户（useMutation）
✅ 删除用户（useMutation）
✅ 使用 Ant Design 进行 UI 交互（Table、Modal、Form、Message）

通过 React Query，我们可以高效管理数据的获取和变更，并利用 Ant Design 提供的组件，让 UI 交互更加流畅。下一篇博客，我们将深入探讨 如何使用 Zustand 进行全局状态管理，敬请期待！🚀🚀🚀