React应用调用Github API获取的用户资料无法显示问题求助

核心问题 #

你调用的https://api.github.com/users/defunkt接口返回的是单个用户的JSON对象，但代码中把状态users初始化为数组[]，并通过Array.isArray(users)判断是否渲染。当API请求完成后，users被设置为单个对象，Array.isArray(users)返回false，导致后续的map逻辑完全不执行，页面自然没有内容渲染。

修正方案 #

针对单个用户的需求，直接适配API返回的对象结构即可，无需数组相关逻辑：

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

const url = 'https://api.github.com/users/defunkt';

const Main = () => {
  // 初始化为null，适配单个用户对象的结构
  const [user, setUser] = useState(null);

  const getUser = async () => {
    const response = await fetch(url);
    const userData = await response.json();
    setUser(userData);
  };

  useEffect(() => {
    console.log("useEffect called");
    getUser();
  }, []);

  return (
    <div>
      <h3>Github User</h3>
      {/* 判断用户数据是否存在，避免初始渲染时读取属性报错 */}
      {user && (
        <div className='user-card'>
          <img src={user.avatar_url} alt={user.login} />
          <div>
            <h4>{user.login}</h4>
            <a href={user.html_url}>profile</a>
          </div>
        </div>
      )}
    </div>
  );
};

export default Main;

关键修改点 #

1. 状态变量从users改为user，语义更贴合单个用户的场景
2. 初始值设为null，避免初始渲染时读取user属性报错
3. 移除数组判断和map方法，直接渲染单个用户的字段
4. 调整渲染结构为更适合单个用户的卡片形式（若需保留列表结构，也可将单个对象放入数组后用map，但语义性稍差）

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