feat: 使用 use-request 请求数据并展示到表格

vite-react/package.json

@@ -7,6 +7,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "@ahooksjs/use-request": "^2.8.3",
     "antd": "^4.12.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",

vite-react/src/pages/user/index.jsx

@@ -1,6 +1,38 @@
 import React from 'react'
 import './index.css'
+import useRequest from '@ahooksjs/use-request'
+import { Table } from 'antd'
 
 export default function User(props) {
-  return <div className="User">User Page</div>
+  const { data, error, loading } = useRequest('/api/users')
+
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: (text) => <a href="">{text}</a>,
+    },
+    {
+      title: 'Email',
+      dataIndex: 'email',
+      key: 'email',
+    },
+    {
+      title: 'Website',
+      dataIndex: 'website',
+      key: 'website',
+    },
+  ]
+  return (
+    <div className="User">
+      <Table
+        size="small"
+        columns={columns}
+        dataSource={data}
+        rowKey={(record) => record.id}
+        loading={loading}
+      />
+    </div>
+  )
 }