React函数组件中如何从Axios Get请求提取对象指定属性

问题背景 #

作为React/axios/js新手，我通过axios从SpringBoot API获取多个带多属性的用户对象用于表格展示，目前仅能获取完整对象，希望在Axios Get请求后提取对象单个属性，导出到表格组件对应字段（姓名、姓氏、邮箱等）展示。我曾用类组件+constructor+setState实现，但现在需用React Hooks和函数组件完成。尝试过map方法和解构对象，但获取的始终是axios Promise对象，无法像普通对象/数组操作。

现有Axios请求模块代码 #

import axios from "axios";

const API_ADRESS = "http://localhost:8080/api/users";

const userDatax = axios.get(API_ADRESS).then((res) => {
  return { nome: res.data[0] };
});

console.log(userDatax);

export default userDatax;

现有React表格组件代码 #

import React, { useState, useEffect } from "react";
import userDatax from "../services/UserService";
import "./card.css";

const TabelaUsuarios = (props) => {
  const [usuario, setUsuario] = useState();

  console.log(userDatax);
  console.log(
    userDatax.then((res) => {
      console.log(res);
    })
  );

  let DATARUX = userDatax.then((res) => {
    return res;
  });

  console.log(DATARUX);

  function callUseState() {
    setUsuario(DATARUX);
  }

  return (
    <div className="card">
      <h1 className="text-center">USUARIOS CADASTRADOS</h1>
      <div>
        <table className="table table-striped">
          <thead>
            <tr>
              <td>ID </td>
              <td>NOME </td>
              <td>SOBRENOME </td>
              <td>EMAIL</td>
              <button onClick={callUseState}>change user</button>
            </tr>
          </thead>
          <tbody>
            <td></td>

            {
              <tr>
                <td>{usuario}</td>
                <td>{usuario}</td>
                <td>{usuario}</td>
                <td>{usuario}</td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default TabelaUsuarios;

SpringBoot API中的用户对象参考 #

public void run(String... args) throws Exception {
RepositorioUsuarios.save(new User("Roger","Waters","rgrwaterspf@gmail.com"));
RepositorioUsuarios.save(new User("Peter","Gabriel","sledgehammer@gmail.com"));
RepositorioUsuarios.save(new User("Rick","Wakeman","srick.wake77@gmail.com"));
RepositorioUsuarios.save(new User("Chuck","Berry","MrChuck10@gmail.com"));

解决方案 #

1. 重构Axios请求模块 #

不要直接导出Promise实例，而是导出一个异步函数，这样可以在组件中按需调用并等待数据返回：

import axios from "axios";

const API_ADRESS = "http://localhost:8080/api/users";

// 导出获取用户列表的异步函数，返回完整用户数组
export const getUsers = async () => {
  const response = await axios.get(API_ADRESS);
  return response.data;
};

2. 修改函数组件逻辑，正确处理异步数据 #

使用useState保存用户数组状态，useEffect在组件挂载时发起请求，同时处理加载状态和异常情况：

import React, { useState, useEffect } from "react";
import { getUsers } from "../services/UserService";
import "./card.css";

const TabelaUsuarios = () => {
  // 初始化用户数组为空数组，方便后续遍历
  const [usuarios, setUsuarios] = useState([]);
  // 加载状态，用于显示加载提示
  const [isLoading, setIsLoading] = useState(false);

  // 封装获取用户数据的异步函数
  const fetchUsers = async () => {
    setIsLoading(true);
    try {
      // 等待异步请求完成，拿到真实用户数据
      const users = await getUsers();
      setUsuarios(users);
    } catch (err) {
      console.error("获取用户失败:", err);
    } finally {
      setIsLoading(false);
    }
  };

  // 组件挂载时自动调用获取数据
  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <div className="card">
      <h1 className="text-center">USUARIOS CADASTRADOS</h1>
      {/* 刷新按钮，加载中时禁用 */}
      <button onClick={fetchUsers} disabled={isLoading}>
        {isLoading ? "加载中..." : "刷新用户列表"}
      </button>
      <div>
        <table className="table table-striped">
          <thead>
            <tr>
              <td>ID</td>
              <td>NOME</td>
              <td>SOBRENOME</td>
              <td>EMAIL</td>
            </tr>
          </thead>
          <tbody>
            {/* 处理加载状态 */}
            {isLoading ? (
              <tr>
                <td colSpan={4} className="text-center">正在加载用户数据...</td>
              </tr>
            ) : usuarios.length === 0 ? (
              {/* 处理无数据状态 */}
              <tr>
                <td colSpan={4} className="text-center">暂无用户数据</td>
              </tr>
            ) : (
              {/* 遍历用户数组，生成表格行 */}
              usuarios.map(user => (
                <tr key={user.id}> {/* 必须添加唯一key，这里假设用户对象有id属性 */}
                  <td>{user.id}</td>
                  <td>{user.nome}</td>
                  <td>{user.sobrenome}</td>
                  <td>{user.email}</td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default TabelaUsuarios;

关键说明 #

• Promise处理：之前的错误在于直接操作Promise对象，必须通过await或.then()等待Promise完成，才能拿到真实的用户数据。
• 状态管理：用数组保存所有用户，通过map方法遍历生成表格行，比单个用户状态更适合多数据场景。
• 用户体验优化：增加加载状态和无数据提示，避免页面空白或显示错误内容。
• 组件规范：表格列表项必须添加唯一key属性，帮助React高效更新DOM。

内容的提问来源于stack exchange，提问作者Spectrezx