为什么这个搜索 github 的 api 的 React 组件不渲染？

Question

嗨，我正在通过从 github 的 API 中提取 github 用户信息来练习 React。我已经正确地布置了所有东西，或者看起来是这样，但是由于某种原因该组件没有呈现。这是我的代码：

      class GitHubSearch extends React.Component {

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

getUser(username) {
    return fetch('https://api.github.com/users/${username}')
    .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">
                {this.state.username} <br/>
                {this.state.id}
            </p>
    </div>
    );
   }
}

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

HTML:

      <div id="container">

     </div>

jsfiddle 上的编辑器唯一说的是存在语法错误，但我知道没有，但多一双眼睛总是好的。如果有什么我没看过的，请告诉我

Answer 1

更新构造函数以修复语法错误：

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

编辑

这里也有错误：

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

为什么这个搜索 github 的 api 的 React 组件不渲染？

Why isn't this react component that searches github's api not rendering?

javascript

json

components

github-api

reactjs