React组件中如何在async函数外获取用户属性并渲染到HTML表格

你当前代码的核心问题是没有将请求到的数据存入React状态，直接调用异步函数后，组件无法感知数据变化，自然没法把数据渲染到表格里。async/await是完全可以用的，但需要结合React的状态管理和useEffect钩子来正确处理异步请求。

修改后的完整代码 #

import React, { useState, useEffect } from "react";

const UserTable = () => {
  const API_URL = "https://randomuser.me/api/";
  // 用useState存储用户数据，初始为空数组
  const [users, setUsers] = useState([]);
  // 可选：存储加载状态，优化体验
  const [isLoading, setIsLoading] = useState(true);

  // 用useEffect在组件挂载时触发异步请求
  useEffect(() => {
    // 定义异步请求函数
    const fetchUsers = async () => {
      try {
        const response = await fetch(API_URL);
        const data = await response.json();
        // 将请求到的用户数组存入状态
        setUsers(data.results);
      } catch (error) {
        console.error("请求用户数据失败:", error);
      } finally {
        // 请求完成后关闭加载状态
        setIsLoading(false);
      }
    };

    // 调用请求函数
    fetchUsers();
  }, []); // 空依赖数组表示仅在组件挂载时执行一次

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <table border="1">
      <thead>
        <tr>
          <th>name</th>
          <th>age</th>
          <th>gender</th>
        </tr>
      </thead>
      <tbody>
        {/* 遍历用户数组渲染表格行 */}
        {users.map((user, index) => (
          <tr key={user.id.value || index}>
            <td>{`${user.name.first} ${user.name.last}`}</td>
            <td>{user.dob.age}</td>
            <td>{user.gender}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default UserTable;

关键修改点说明 #

• 状态管理：用useState创建users状态来存储接口返回的用户数据，当数据更新时React会自动重新渲染组件。
• 异步请求时机：用useEffect钩子包裹异步请求，空依赖数组[]确保请求只在组件挂载时执行一次，避免重复请求。
• 数据渲染：通过map遍历users数组，将每个用户的属性映射到表格的<tr>和<td>中，用用户的id.value作为唯一key（比index更可靠）。
• 异常与加载处理：加入try/catch捕获请求错误，同时用isLoading状态处理加载过渡，提升用户体验。

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