React调用GitHub API获取用户仓库报错：Cannot read property 'value' of undefined

阿华AIGC实验室

2026-5-25

修复React GitHub搜索应用的仓库显示错误

看起来你遇到的这个Uncaught (in promise) TypeError: Cannot read property 'value' of undefined错误，大概率是几个细节没处理好：输入值获取异常、仓库数据的state初始化错误，或者API响应处理时访问了不存在的属性。我给你一步步拆解修复方案：

1. 先排查输入值的获取逻辑

首先看你调用getUser方法的场景——如果是从输入框拿用户名，很可能是你没正确拿到输入值，导致传入getUser的username是undefined，后续API请求和数据处理就会出问题。

比如用受控组件的话，要确保输入框的onChange正确更新state：

render() {
  return (
    <div>
      <input 
        type="text"
        value={this.state.username}
        onChange={(e) => this.setState({ username: e.target.value })}
        placeholder="输入GitHub用户名"
      />
      <button onClick={() => this.getUser(this.state.username)}>搜索用户</button>
    </div>
  );
}

要是用ref获取输入值，一定要先初始化ref，并且用可选链避免current为undefined：

constructor(props) {
  super(props);
  this.state = { username: '', userrepo: [] }; // 注意这里userrepo改成数组
  this.inputRef = React.createRef(); // 初始化ref
}

// 调用getUser时
getUser() {
  const username = this.inputRef.current?.value; // 用?.避免ref未挂载的情况
  if (!username?.trim()) {
    alert('请输入有效的用户名');
    return;
  }
  // 后续API请求逻辑
}

2. 修正仓库数据的State初始化和API处理

你当前state里的userrepo是字符串''，但GitHub API返回的仓库是数组格式。如果后续你尝试遍历userrepo或者访问它的属性，字符串类型肯定会出问题。另外，错误里的value很可能是你误把仓库对象的属性写成了value（GitHub仓库数据里没有这个字段）。

先把state初始化改对：

constructor(props){
  super(props);
  this.state = { 
    username: '', 
    userInfo: null, // 新增存储用户信息的state
    userrepo: [] // 仓库数据初始化为空数组
  };
}

然后完善getUser里的API请求和错误处理，避免Promise未捕获异常：

async getUser(username) {
  if (!username.trim()) return;
  
  try {
    // 先请求用户信息
    const userRes = await fetch(`https://api.github.com/users/${username}`);
    if (!userRes.ok) throw new Error('用户不存在或API请求失败');
    const userInfo = await userRes.json();

    // 再请求用户仓库
    const repoRes = await fetch(`https://api.github.com/users/${username}/repos`);
    const userrepo = await repoRes.json();

    // 更新state
    this.setState({ userInfo, userrepo });
  } catch (err) {
    console.error('请求出错:', err);
    alert(err.message);
  }
}

3. 正确渲染仓库列表

渲染仓库的时候，要确保访问的是GitHub API返回的正确属性（比如name、html_url），而不是不存在的value：

renderRepos() {
  const { userrepo } = this.state;
  if (userrepo.length === 0) return <p>暂无仓库数据</p>;

  return (
    <ul>
      {userrepo.map(repo => (
        <li key={repo.id}>
          <a href={repo.html_url} target="_blank" rel="noopener noreferrer">
            {repo.name}
          </a>
          <span> - {repo.stargazers_count} 星标</span>
        </li>
      ))}
    </ul>
  );
}

// 在render里调用这个方法
render() {
  const { userInfo } = this.state;
  return (
    <div>
      {/* 输入框和按钮 */}
      {userInfo && (
        <div className="user-info">
          <img src={userInfo.avatar_url} alt="用户头像" width="100" />
          <h2>{userInfo.login}</h2>
          <p>{userInfo.bio || '暂无简介'}</p>
        </div>
      )}
      {this.renderRepos()}
    </div>
  );
}