顯示Github中存儲庫的名稱React中的搜索API

Question

我正在使用Search API從Github中查找存儲庫。我目前能夠搜索回購站，但我想在頁面上顯示回購站的名稱和信息。我正在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(); 

    } 
}