リポジトリの表示名Github Search API from React

Question

Githubからリポジトリを検索するためにSearch APIを使用しています。私は現在reposを検索することができますが、私はrepoの名前とページ上の情報を表示したいと思います。私はReactでページを構築しています。 JSONファイルからデータを取得してページ自体に追加するにはどうすればよいですか？

let searchTerm; 
const repositories = []; 

class SearchBox extends React.Component { 

    constructor(props) { 
     super(props); 
     this.onClick = this.onClick.bind(this); 

    } 


    render() { 
     return(
     <div> 
      <form> 
       <input type="text" className="searchbox" ref={(input) => { this.searchBox = input; }}/> 
       <button onClick={this.onClick}>Search</button> 
      </form> 
      <div className="foundRepo">{this.props.name}</div> 
      </div> 
     ); 
    } 

    onClick(event) { 

    searchTerm = this.searchBox.value; 
    let endpoint = 'https://api.github.com/search/repositories?sort=stars&order=desc&q=' + searchTerm; 
    console.log(searchTerm); 
     fetch(endpoint) 
    .then(blob => blob.json()) 
    .then(data => repositories.push(...data)); 
    event.preventDefault(); 


    } 
} 

反応し、APIを使用して、両方のは、コードが少し厄介かもしれないので、私にはかなり新しいですが、それは仕事をしません。データにアクセスするには、ちょっとした助けが必要です。ありがとう。

Answer 1

応答データをコンポーネント状態で格納し、.mapでループバックして表示します。 how component state worksについてお読みください。

let searchTerm; 

class SearchBox extends React.Component { 

    constructor(props) { 
     super(props); 
     this.onClick = this.onClick.bind(this); 
     this.state = { repositories: [] }; 
    } 


    render() { 
     return(
      <div> 
       <form> 
       <input type="text" className="searchbox" ref={(input) => { this.searchBox = input; }}/> 
       <button onClick={this.onClick}>Search</button> 
       </form> 
       <div className="foundRepo">{this.props.name}</div> 
       <h2>Repositories</h2> 
       <ul> 
       { this.state.repositories.map((item, index) => (
        <li key={ index }> 
         { item.name } 
        </li> 
       )) } 
       </ul> 
      </div> 
      ); 
    } 

    onClick(event) { 

     searchTerm = this.searchBox.value; 
     let endpoint = 'https://api.github.com/search/repositories?sort=stars&order=desc&q=' + searchTerm; 
     console.log(searchTerm); 
     fetch(endpoint) 
      .then(blob => blob.json()) 
      .then(response => { 
       this.setState({ repositories: response.items }); 
      }); 
     event.preventDefault(); 

    } 
}