当前位置：首页 > 文章列表 > 文章 > 前端 > React展示数组数据表格技巧

React展示数组数据表格技巧

2025-08-26 12:36:40 0浏览收藏

本文详细介绍了在 React 中如何高效地将从 API 获取的数组数据展示在表格中。核心在于利用 `useState` 管理数组状态，并通过 `useEffect` 钩子异步更新状态，确保表格能够响应数据变化并正确渲染。文章提供了清晰的代码示例，演示了如何使用 `axios` 获取数据，以及如何避免直接修改状态，而是通过 `setUre` 触发组件重新渲染。此外，还强调了 `key` 属性在列表渲染中的重要性。通过本文的学习，开发者可以掌握在 React 表格中展示动态数组数据的关键技巧，构建更健壮、易维护的前端组件。

在 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 来触发重新渲染。

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() 方法遍历数组中的每个对象，并为每个对象创建一个表格行。 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;