本文旨在指导开发者如何在 React 表格中有效地展示从 API 获取的数组数据。通过将数组状态化，并在 useEffect 钩子中异步更新状态，我们可以确保表格能够正确渲染动态数据。本文提供详细的代码示例和解释，帮助你避免常见的渲染问题，并构建可维护的 React 组件。
在 React 应用中，经常需要从后端 API 获取数据并在表格中展示。本文将介绍如何正确地处理和渲染数组数据到 React 表格中，避免常见的渲染问题。
1. 使用 State 管理数组数据
在 React 中，要使组件能够响应数据的变化，需要将数据存储在 state 中。 这样，当数据更新时，React 会重新渲染组件，从而更新表格的内容。
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function MyTable() {
const [ure, setUre] = useState([]);
// ...
}这里，我们使用 useState 钩子创建了一个名为 ure 的状态变量，初始值为空数组 []。 setUre 函数用于更新 ure 的值。
2. 在 useEffect 中获取和更新数据
useEffect 钩子用于处理副作用，例如从 API 获取数据。当组件挂载后，useEffect 会执行回调函数。
useEffect(() => {
axios
.get("/api/listUre")
.then((res) => {
console.log(res.data);
// 正确更新状态的方式
setUre(res.data);
})
.catch((error) => {
// 处理错误
console.log(error);
})
.finally(() => {
// 可选：在请求完成后执行的操作
});
}, []); // 空依赖数组表示只在组件挂载时执行一次在这个例子中，我们使用 axios 发起 GET 请求，从 /api/listUre 获取数据。当请求成功时，我们使用 setUre 函数将获取到的数据更新到 ure 状态中。注意，直接将 res.data 赋值给 ure，而不是使用 ure.push()。 ure.push() 是直接修改状态，这在 React 中是不推荐的。 应该使用 setUre 来触发重新渲染。
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
3. 在表格中渲染数据
有了状态化的数组数据，我们就可以在表格中渲染它了。
return (
| Class ID | Class ID (Duplicate) | Name |
|---|---|---|
| {obj.class_id} | {obj.class_id} | My Name |
这里，我们使用 ure.map() 方法遍历数组中的每个对象，并为每个对象创建一个表格行
不需要使用 ure.length > 0 && 来判断数组是否为空。 map() 方法会自动处理空数组的情况，不会渲染任何内容。
4. 完整代码示例
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function MyTable() {
const [ure, setUre] = useState([]);
useEffect(() => {
axios
.get("/api/listUre")
.then((res) => {
console.log(res.data);
setUre(res.data);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
});
}, []);
return (
| Class ID | Class ID (Duplicate) | Name |
|---|---|---|
| {obj.class_id} | {obj.class_id} | My Name |
总结
通过将数组数据存储在 state 中，并在 useEffect 钩子中异步更新状态，我们可以确保 React 表格能够正确渲染动态数据。记住以下几点：
- 使用 useState 管理数组数据。
- 使用 useEffect 获取和更新数据。
- 使用 map() 方法遍历数组并渲染表格行。
- 为每个表格行添加唯一的 key 属性。
- 使用 setUre 来更新状态，而不是直接修改状态。
遵循这些步骤，你就可以轻松地在 React 表格中展示数组数据，并构建可维护的 React 组件。
