如何使用React从GitHub API获取用户存储库？

Question

我有一个使用GitHub API搜索用户的React应用程序。 我已经成功实现了搜索用户的部分，但是当我添加一个组件来显示用户的存储库时，它只显示用户信息，并且控制台会给出以下错误：Uncaught (in promise) TypeError: Cannot read property 'value' of undefined

这是我的代码：

    class GitHubSearch extends React.Component {
       constructor(props){ 
         super(props); 
          this.state = { 
           username: '',
           userrepo: '',
          };
       }

       getUser(username) {
          return fetch(`https://api.github.com/users/${username}`)
          .then(response => response.json())
          .then(response => {
            return response;
           })
      }

       getUserRepo(userrepo) {
         return fetch(`https://api.github.com/users/${username}/repos`)
         .then(response => response.json())
         .then(response => {
          return response;
        })
      }

       async handleSubmit(e) {
           e.preventDefault();
           let user = await this.getUser(this.refs.username.value);
           this.setState({ avatar_url: user.avatar_url,
           username: user.login,
           followers: user.followers,
           following: user.following,
            url: user.url,
       });

     let repo = await this.getUserRepo(this.refs.userrepo.value);
        this.setState({ name: repo.name,
        description: repo.description,
        git_url: repo.git_url,
        stargazers_count: repo.stargazers_count,
        forks_count: repo.forks_count,
        open_issues_count: repo.open_issues_count,
        size: repo.size,

     })

  }

     render() {
       let user;
       if(this.state.username) {
          user = 
          <div className="resultBadge">
            <img src={this.state.avatar_url}/>
            <p className="userInfo">
             Username: <br/>
             {this.state.username} 
            </p> 
            <p className="followerInfo">
             {this.state.followers} Followers
            </p>
            <p className="followingInfo">
              Following {this.state.following} users
            </p>
          </div>
      }

      let repo;
        if(this.state.userrepo) {
           repo =
             <div className="repoResults">
                <p>
                  {this.state.name}
               </p>
             </div>
         }

           return (
              <div className="GitHubSearch">
                <header className="Search-header">
                  <h1>Github User Search </h1>
                </header>
                <form onSubmit={e => this.handleSubmit(e)}>
                   <input ref='username' type='text' placeholder='username' />
               </form>
               <p className="Search-intro">
                  {user}
               </p>
      <p>
        {repo}
       </p>
      </div>
   );
 }
}


ReactDOM.render(<GitHubSearch/>, document.getElementById('container'));

HTML的内容如下：

这里有什么缺失吗？

- MikeL5799

---

React与此有什么关系？而且，既然错误提示已经准确告诉您问题出在哪里，您的问题究竟是什么？ - Jared Smith

你的 <input ref="userrepo"> 在哪里？ - zero298

@zero298 哎呀，我真不敢相信我犯了那个错误。 - MikeL5799

Answer 1

实际上，您没有userrepo引用。

可能应该使用相同的引用来获取存储库，因为您的getUserRepo获取的是用户名属性而不是存储库名称。

因此，您的getUserRepo函数应该像这样：

let repo = await this.getUserRepo(this.refs.username.value);
        this.setState({ name: repo.name,
        description: repo.description,
        git_url: repo.git_url,
        stargazers_count: repo.stargazers_count,
        forks_count: repo.forks_count,
        open_issues_count: repo.open_issues_count,
        size: repo.size,

     })

- Denys Kotsur

---

好的，谢谢。那么我可以这样做吗？<input ref='username userrepo' type='text' placeholder='用户名' /> - MikeL5799

哦，不好意思，我并没有添加第二个输入，我是将输入更改为在同一个引用中具有两个值。 - MikeL5799

@MikeL5799 这是什么目的？在这两种情况下，你只需要 username :) https://api.github.com/users/${username} - 获取用户 https://api.github.com/users/${username}/repos - 获取用户存储库 - Denys Kotsur

@MikeL5799 回答你的问题 - 不行。每个输入字段只能有一个值。 - Denys Kotsur

让我们在聊天中继续这个讨论。 - Denys Kotsur