Go1.20＋React18 如何动态渲染服务端数据？

大家好，我是张大鹏 ，今天又来给大家分享技术文章了。

在之前的文章中，我们已经学会了如何开发一个用户列表接口，今天的文章，我们一起学习一下如何在 React18 中请求用户列表接口，动态渲染用户列表数据。

在开始之前，我们需要先准备数据。我们使用 Python 脚本，快速的注册 100 个账号用于测试：

import zdppy_requests as zr

url = "http://localhost:8893/api/v1/auth/register"

headers = {"Authorization": "xxx"}

for i in range(1, 101):

   data = {"username": f"zhangdapeng{i}",

           "password": f"zhangdapeng{i}",

           "re_password": f"zhangdapeng{i}"}

   r = zr.post(url, headers=headers, json=data)

   print(r.status_code, r.text)

此时，我们的数据库中将会拥有 101 条用户信息：

有了这些测试数据以后，我们就可以在 React18 中编写前端代码了。

首先，我们封装一个请求用户列表的接口方法：

export const apiGetUserPage = (params: PageRequest): Promise => {

   return authClient.get('/auth/userpage', )

}

这里的 PageRequest 是请求类型，代码如下：

export interface PageRequest {

   page: number

   size: number

}

这里的 UserPageResponse 是接口的响应类型，代码如下：

export interface UserPageResponse {

   total: number

   data: UserInfo[]

}

这里的 UserInfo 就是表格中要渲染的用户数据类型，代码如下：

export interface UserInfo {

   id: number

   username: string // 用户名

   is_active: boolean // 是否激活

   fullname: string // 姓名

   role: string // 角色

   gender: string // 性别

   age: number // 年龄

}

有了这个封装的接口方法以后，我们就可以在表格中进行渲染了。为了保证数据的动态性，我们需要设置 currrent、size、data、total 四个数据的状态管理，代码如下：

const [current, setCurrent] = useState(1);

const [size, setSize] = useState(10);

const [total, setTotal] = useState(30);

const [data, setData] = useState(mockData as UserInfo[]);

然后我们定义一个加载数据的方法，因为在很多时候都需要重新加载数据。比如初始化的时候，分页修改的时候，分页数量修改的时候等等。封装的加载数据的代码如下：

const loadData = () => {

   apiGetUserPage({

       page: current,

       size: size,

   }).then(resp => {

       setTotal(resp.total)

       setData(resp.data)

   })

}

接着，我们在数据初始化的时候，加载数据，代码如下：

useEffect(() => {

   loadData()

}, [current, size])

然后我们渲染表格和分页，代码如下：

{/*表格数据*/}

record.id} rowSelection={rowSelection} columns={columns} dataSource={data}

      pagination={false}/>

{/*分页对象*/}

   style={{marginTop: "20px", textAlign: "center"}}

   defaultCurrent={1}

   total={total}

   hideOnSinglePage={true}

   showSizeChanger

   onShowSizeChange={onShowSizeChange}

   className="pagination"

   onChange={onPageChange}

/>

当分页修改的时候，需要重新加载数据，代码如下：

const onPageChange: PaginationProps['onChange'] = (page, size) => {

   setCurrent(page)

   setSize(size)

   loadData()

};

当每页数量修改的时候，也需要重新加载数据，代码如下：

const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {

   setCurrent(current)

   setSize(pageSize)

   loadData()

};

最终的页面效果渲染如下：

今天的分享就到这里了，谢谢大家~