本文旨在指导开发者如何在 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 来触发重新渲染。
3. 在表格中渲染数据
有了状态化的数组数据，我们就可以在表格中渲染它了。
return (
<table>
<thead>
<tr>
<th>Class ID</th>
<th>Class ID (Duplicate)</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{ure.map((obj, index) => (
<tr key={index}>
<td>{obj.class_id}</td>
<td>{obj.class_id}</td>
<td>My Name</td>
</tr>
))}
</tbody>
</table>
);这里，我们使用 ure.map() 方法遍历数组中的每个对象，并为每个对象创建一个表格行 <tr>。 key 属性对于 React 识别列表中的元素至关重要，它可以帮助 React 更有效地更新 DOM。
不需要使用 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 (
<table>
<thead>
<tr>
<th>Class ID</th>
<th>Class ID (Duplicate)</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{ure.map((obj, index) => (
<tr key={index}>
<td>{obj.class_id}</td>
<td>{obj.class_id}</td>
<td>My Name</td>
</tr>
))}
</tbody>
</table>
);
}
export default MyTable;总结
通过将数组数据存储在 state 中，并在 useEffect 钩子中异步更新状态，我们可以确保 React 表格能够正确渲染动态数据。记住以下几点：
- 使用 useState 管理数组数据。
- 使用 useEffect 获取和更新数据。
- 使用 map() 方法遍历数组并渲染表格行。
- 为每个表格行添加唯一的 key 属性。
- 使用 setUre 来更新状态，而不是直接修改状态。
遵循这些步骤，你就可以轻松地在 React 表格中展示数组数据，并构建可维护的 React 组件。
