Wenn ich SetState hinzufügen, erhalte ich eine Fehlermeldung über ein unerwartetes Token

Question

Ich verwende React für eine Such-API. Ich versuche derzeit, für jedes Ergebnis eine Schaltfläche hinzuzufügen, die mehr Informationen anzeigt. Ich mache das mit setState. Wenn ich das dem Code hinzufüge, scheint es meine onClick-Funktion zu zerstören. Mit diesem Code erhalte ich eine Fehlermeldung, die besagt, dass ein unerwartetes Token auf die onClick-Funktion verweist.

Ich würde die Hilfe beim Sortieren der Schaltfläche oder einfach nur beheben den Fehler :) Vielen Dank.

Answer 1

Gerade hatte eine geschweifte Klammer zu viele.

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> 


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

    } 
}