如何在 React 中使用 github api 来显示 github 用户信息？

Question

我开始制作一个 React 应用程序，它可以通过用户名搜索 github 用户，其中包含一个显示用户名、个人资料头像、关注者数量、用户关注者的组件，以及一个显示用户存储库的组件。到目前为止我有以下代码：

     class GitHubSearch extends React.Component {

         constructor(props){ 
           super(props); 
            this.state = { 
            username: '' 
          };
        }

getUser(username) {
    return fetch('https://api.github.com/users/${login}')
    .then(response => response.json())
    .then(response => {
        return response;
    })
}
async handleSubmit(e) {
    e.preventDefault();
    let user = await this.getUser(this.refs.username.value);
    this.setState({username: user.login,
        id: user.id,
        url: user.url,
        avatar_url: user.avatar_url,
    });
}

render() {
 let user;
 if(this.state.username) {
    user = 
    <div>
        <p>{this.state.username} 
  <br/> 
    {this.state.id} 
  <br/> 
  </p>
        <img src={this.state.avatar_url}/>
    </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>
    </div>
    );
   }
 }

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

这是 HTML：

        <div id="container">

        </div>

到目前为止，搜索组件已呈现，但当我输入用户名时，我在控制台中收到此错误：GET https://api.github.com/users/$%7Blogin%7D 404 (Not Found)

我缺少什么？

Answer 1

您应该用反引号替换函数中的引号fetch，因为它们允许内联变量。正常的引号不会。

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