无法从Fake API加载数据，请求协助遍历嵌套键值对数据

一、修复数据加载报错 #

先排查并修复数据加载问题，核心是给请求加上完整的错误处理，同时确保组件渲染时的状态判断逻辑正确：

import { useState, useEffect } from "react";

function Users() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch("https://fakestoreapi.com/users");
        // 校验HTTP响应状态
        if (!response.ok) {
          throw new Error(`请求失败: ${response.status}`);
        }
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchUsers();
  }, []);

  // 渲染错误提示
  if (error) {
    return <div>加载失败: {error}</div>;
  }

  // 加载中状态
  if (users.length === 0) {
    return <div>加载中...</div>;
  }

  // 渲染用户列表
  return (
    <div className="users-container">
      <h2>用户列表</h2>
      {users.map(user => (
        <div key={user.id} className="user-card">
          <h3>{user.name.firstname} {user.name.lastname}</h3>
          <p>邮箱: {user.email}</p>
          <p>电话: {user.phone}</p>
          {/* 处理嵌套的地址数据 */}
          <div className="user-address">
            <h4>地址信息</h4>
            <p>街道: {user.address.street}</p>
            <p>城市: {user.address.city}</p>
            <p>邮编: {user.address.zipcode}</p>
            {/* 处理更深层的坐标数据 */}
            <p>坐标: 纬度 {user.address.geo.lat}, 经度 {user.address.geo.lng}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default Users;

二、嵌套键值对的通用遍历方法 #

如果需要处理未知结构的嵌套数据，可以写一个递归组件来遍历所有键值对：

function NestedDataViewer({ data }) {
  return (
    <ul>
      {Object.entries(data).map(([key, value]) => (
        <li key={key}>
          <span>{key}: </span>
          {typeof value === 'object' && value !== null ? (
            <NestedDataViewer data={value} />
          ) : (
            <span>{value}</span>
          )}
        </li>
      ))}
    </ul>
  );
}

使用时直接传入嵌套数据即可：

// 在用户卡片中调用，展示完整地址嵌套数据
<NestedDataViewer data={user.address} />

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