如何在React中通过GitHub API获取并展示GitHub用户信息？

嘿，我来帮你搞定这个GitHub用户搜索的React应用！先看看你现有代码里的几个小问题，然后给你一套完整的可运行方案：

1. 先修正你现有代码的核心问题 #

你当前的代码存在几个关键错误：

• 模板字符串需要用**反引号（）**而非单引号（'），不然${login}`不会被解析成变量
• getUser方法接收的参数是username，但你在fetch里写了${login}，这是未定义的变量，应该改成${username}
• 状态只存储了username，还需要补充用户数据、仓库列表、加载状态、错误提示这些关键状态，才能支撑完整的交互逻辑

2. 完整可运行代码 #

我把组件拆分成了用户信息、仓库列表两个子组件，同时完善了API调用、状态管理和用户交互：

import React from 'react';

// 展示用户基础信息的子组件
const UserInfo = ({ user }) => (
  <div className="user-info">
    <img 
      src={user.avatar_url} 
      alt={`${user.login}的头像`} 
      style={{ width: '150px', borderRadius: '50%' }} 
    />
    <h2>{user.login}</h2>
    <p>粉丝数: {user.followers}</p>
    <p>关注数: {user.following}</p>
  </div>
);

// 展示用户仓库列表的子组件
const RepoList = ({ repos }) => (
  <div className="repo-list">
    <h3>用户仓库</h3>
    <ul>
      {repos.map(repo => (
        <li key={repo.id}>
          <a href={repo.html_url} target="_blank" rel="noopener noreferrer">{repo.name}</a>
          <p>{repo.description || '无描述'}</p>
          <span>⭐ {repo.stargazers_count}</span>
        </li>
      ))}
    </ul>
  </div>
);

class GitHubSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      userData: null, // 存储用户基础信息
      repos: [], // 存储用户仓库列表
      loading: false, // 加载状态
      error: null // 错误提示
    };
    // 绑定this到事件处理函数
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
  }

  // 处理输入框内容变化
  handleInputChange(e) {
    this.setState({ username: e.target.value });
  }

  // 并行获取用户信息和仓库数据
  async getUserAndRepos(username) {
    this.setState({ loading: true, error: null });
    try {
      // 获取用户基础信息
      const userResponse = await fetch(`https://api.github.com/users/${username}`);
      if (!userResponse.ok) throw new Error('用户不存在或请求失败');
      const userData = await userResponse.json();

      // 获取用户仓库列表
      const reposResponse = await fetch(`https://api.github.com/users/${username}/repos`);
      if (!reposResponse.ok) throw new Error('获取仓库列表失败');
      const repos = await reposResponse.json();

      this.setState({ userData, repos, loading: false });
    } catch (err) {
      this.setState({ error: err.message, loading: false });
    }
  }

  // 处理搜索表单提交
  handleSearch(e) {
    e.preventDefault();
    const { username } = this.state;
    if (username.trim()) {
      this.getUserAndRepos(username.trim());
    }
  }

  render() {
    const { username, userData, repos, loading, error } = this.state;
    return (
      <div className="github-search">
        <h1>GitHub 用户搜索</h1>
        <form onSubmit={this.handleSearch}>
          <input
            type="text"
            value={username}
            onChange={this.handleInputChange}
            placeholder="输入GitHub用户名"
          />
          <button type="submit" disabled={loading}>搜索</button>
        </form>

        {/* 加载状态提示 */}
        {loading && <p>正在加载中...</p>}

        {/* 错误提示 */}
        {error && <p style={{ color: 'red' }}>{error}</p>}

        {/* 用户信息展示 */}
        {userData && <UserInfo user={userData} />}

        {/* 仓库列表展示 */}
        {repos.length > 0 && <RepoList repos={repos} />}
      </div>
    );
  }
}

export default GitHubSearch;

3. 关键功能说明 #

• 组件拆分：把用户信息和仓库列表拆成独立子组件，让代码更清晰、复用性更强
• 状态管理：添加了加载状态、错误提示，提升用户交互体验，避免重复提交
• API优化：用async/await替代链式then，代码更易读；同时处理了HTTP错误状态（比如404用户不存在）
• 交互细节：搜索按钮在加载时禁用，输入框内容去空格后再发起请求

4. 可选基础样式 #

给组件加一点样式，让界面更友好：

.github-search {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

form {
  margin: 2rem 0;
  display: flex;
  gap: 0.5rem;
}

input {
  flex: 1;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #e1e4e8;
  border-radius: 4px;
}

button {
  padding: 0.5rem 1rem;
  background: #2ea44f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background: #94d3a2;
  cursor: not-allowed;
}

.user-info {
  margin: 2rem 0;
  padding: 1rem;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
}

.repo-list ul {
  list-style: none;
  padding: 0;
}

.repo-list li {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
}

.repo-list a {
  color: #0366d6;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
}

.repo-list a:hover {
  text-decoration: underline;
}

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