setStateを使用したAJAXリクエストのコンテンツの表示

Question

github検索APIを使用してwebappを実行しています。特定のレポの下に表示される各レポの情報が必要です。 特定のボタンが押されているときに、AJAXリクエストからのコンテンツを表示します。私はReactを使用しています。私はitem.xを使って情報にアクセスしていますので、私はその項目を取得する必要があると思います。マップを使用する必要があると仮定しますが、そのとき、特定のリポジトリだけでなくすべての結果が表示されます。とにかく、それは現在それが未定義であると言って以来、私はアイテムを得ることができますか？

let searchTerm; 

class SearchBox extends React.Component { 


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

    } 


    render() { 
    let moreDetail; 
    if(this.state.showInfo){ 
    moreDetail= <div className="info">     <li> 
        <p>Open issue count </p>:{item.open_issues_count} 
        </li> 
        <li> 
        <p>Number of forks </p>:{item.forks} 
        </li> 
        <li> 
        <p>Language </p>:{item.language} 
        </li></div>; 
    } 
     return(
      <div> 
       <form> 
       <input type="text" className="searchbox" ref={(input) => { this.searchBox = input; }}/> 
       <button onClick={this.onClick}>Search</button> 
       </form> 
       <h2>Repositories</h2> 
       <ul> 
       { this.state.repositories.map((item, index) => (
       <div key={ index }> 
        <a href={item.html_url}> <li > 
         { item.name } 

        </li> 
        </a> 
       {moreDetail} 

        <button onClick={this._handleClick.bind(this)}>Detailed view</button> 
       </div> 
       )) } 
       </ul> 
      </div> 
      ); 
    } 

    _handleClick(){ 
    this.setState({ 
    showInfo: !this.state.showInfo 
    }); 
    } 


    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(); 

    } 
} 

Answer 1

問題は文脈にあります。あなたがmoreDetail変数を定義するとき、あなたは（だけのマップ機能の間、あなたはそれを持っている。）あなたのコンテキストでitemを持っていない

1つのオプションは、表示したい項目を受け取る関数として変数moreDetailを使用することです。

のようなものになるはずですあなたのrenderメソッド：

render() { 
    const moreDetail = (item) => (!this.state.showInfo ? <span /> : 
      <div className="info">      
       <li> 
        <p>Open issue count </p>:{item.open_issues_count} 
       </li> 
       <li> 
        <p>Number of forks </p>:{item.forks} 
       </li> 
       <li> 
        <p>Language </p>:{item.language} 
       </li> 
      </div> 
     ); 

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

       </li> 
       </a> 
       {moreDetail(item)} 

       <button onClick={this._handleClick.bind(this)}>Detailed view</button> 
      </div> 
      )) } 
      </ul> 
     </div> 
     ); 
} 

を