当我添加 setState 时，我收到有关意外令牌的错误消息答案

【问题标题】：When I add setState I get error message about unexpected token当我添加 setState 时，我收到有关意外令牌的错误消息
【发布时间】：2017-03-03 02:29:24
【问题描述】：

我正在使用 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();

    }
}

如果能帮助我整理按钮或修复错误，我将不胜感激 :) 谢谢。

【问题讨论】：

你有一个太多的右花括号。尝试删除多余的，看看是否有帮助。
你能粘贴你的错误信息吗？在这里看不到任何错误：/
谢谢，是的，一对多大括号。
如您所见，我在 {moreDetail} 中使用了 item.x，但它没有定义，因为我稍后才映射它。知道如何解决这个问题吗？
你能不能通过移动更多的缩进来降低代码的可读性......开个玩笑:)我不确定你的问题是什么，但我能注意到的一件事是地图功能肯定需要返回一个值，您不会在以下位置返回映射的 jsx：this.state.repositories.map( ( item, index ) => { return (
{item.name + " stuff ..." })})

标签： javascript reactjs

【解决方案1】：

只是花括号太多了。

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

    }
}

【讨论】：