當我添加setState時，我收到有關意外標記的錯誤消息

Question

我正在使用React作爲搜索API。我目前正在嘗試爲每個結果添加一個按鈕，以顯示更多信息。我通過使用setState來做到這一點。當我將其添加到代碼時，它似乎打破了我的onClick函數。使用此代碼，我收到一條錯誤消息，指出意外的令牌，指向onClick函數。

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

    } 
} 

我將不勝感激幫助排序按鈕或只是修復錯誤:)謝謝。

Answer 1

剛剛有一個花括號太多。

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

    } 
}