本文旨在指导开发者如何在 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 (
| Class ID | Class ID (Duplicate) | Name |
|---|---|---|
| {obj.class_id} | {obj.class_id} | My Name |
这里，我们使用 ure.map() 方法遍历数组中的每个对象，并为每个对象创建一个表格行
。 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 ( | Class ID | Class ID (Duplicate) | Name |
|---|---|---|
| {obj.class_id} | {obj.class_id} | My Name |
总结
通过将数组数据存储在 state 中，并在 useEffect 钩子中异步更新状态，我们可以确保 React 表格能够正确渲染动态数据。记住以下几点：
使用 useState 管理数组数据。使用 useEffect 获取和更新数据。使用 map() 方法遍历数组并渲染表格行。为每个表格行添加唯一的 key 属性。使用 setUre 来更新状态，而不是直接修改状态。
遵循这些步骤，你就可以轻松地在 React 表格中展示数组数据，并构建可维护的 React 组件。
以上就是在 React 表格中展示数组数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572842.html
微信扫一扫 
支付宝扫一扫 
