在 React 表格中展示数组数据-html教程-PHP中文网

在 React 表格中展示数组数据

聖光之護

发布： 2025-08-19 17:08:36

原创

813人浏览过

在 react 表格中展示数组数据

本文旨在指导开发者如何在 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 来触发重新渲染。

站长中国企业(公司)网站系统 4.2

功能列表：1.全站静态化HTML页面2.公司简介3.新闻中心4.产品介绍5.招聘信息6.联系我们7.客户留言8.广告管理9.幻灯片管理10.友情链接新功能：新闻中心企业简介产品展示招聘信息栏目自主设置keyword支持SEO使用说明：默认页为：deafaul.html数据库地址：database/zzchn#da2005.asp数据库名称：zzchn#da2005.asp后台用户地址：admin后

查看详情

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 组件。

以上就是在 React 表格中展示数组数据的详细内容，更多请关注php中文网其它相关文章！