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

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

javascript reactjs

Javascript 当我添加setState时，会收到有关意外令牌的错误消息,javascript,reactjs,Javascript,Reactjs,我正在使用React作为搜索API。我目前正在尝试为每个结果添加一个按钮，以显示更多信息。我正在使用setState进行此操作。当我将它添加到代码中时，它似乎破坏了我的onClick函数。在这段代码中，我得到一条错误消息，指向onClick函数，说是unexpected token let searchTerm; class SearchBox extends React.Component { constructor(props) { super(props);

我正在使用React作为搜索API。我目前正在尝试为每个结果添加一个按钮，以显示更多信息。我正在使用setState进行此操作。当我将它添加到代码中时，它似乎破坏了我的onClick函数。在这段代码中，我得到一条错误消息，指向onClick函数，说是unexpected token

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

    }
}

let searchTerm；
类SearchBox扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onClick=this.onClick.bind（this）；
this.state={repositories:[]，
showInfo:false}；
}
render（）{
让我们来了解更多细节；
if（this.state.showInfo）{
moreDetail=
未结问题计数：{item.Open\u issues\u count}


叉数：{item.forks}


语言：{item.Language}
；
}
返回(
{this.searchBox=input；}}/>
搜寻
存储库

{this.state.repositories.map（（项，索引）=>(
详细视图
)) }

);
}
_handleClick（）{
这是我的国家({
showInfo:！this.state.showInfo
});
}
}
onClick（事件）{
searchTerm=this.searchBox.value；
让我们来看看https://api.github.com/search/repositories?sort=stars&order=desc&q=“+搜索词；
console.log（searchTerm）；
获取（端点）
.then（blob=>blob.json（））
。然后（响应=>{
this.setState（{repositories:response.items}）；
});
event.preventDefault（）；
}
}

如果您能帮我整理一下按钮，或者只是修复错误，我将不胜感激：）谢谢。

刚才的括号太多了

让我们来搜索术语

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

    }
}

类搜索框扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onClick=this.onClick.bind（this）；
this.state={repositories:[]，
showInfo:false}；
}
render（）{
让我们来了解更多细节；
if（this.state.showInfo）{
moreDetail=
未结问题计数：{item.Open\u issues\u count}


叉数：{item.forks}


语言：{item.Language}
；
}
返回(
{this.searchBox=input；}}/>
搜寻
存储库

{this.state.repositories.map（（项，索引）=>(
详细视图
)) }

);
}
_handleClick（）{
这是我的国家({
showInfo:！this.state.showInfo
});
}
onClick（事件）{
searchTerm=this.searchBox.value；
让我们来看看https://api.github.com/search/repositories?sort=stars&order=desc&q=“+搜索词；
console.log（searchTerm）；
获取（端点）
.then（blob=>blob.json（））
。然后（响应=>{
this.setState（{repositories:response.items}）；
});
event.preventDefault（）；
}
}

刚刚有一个卷曲的括号太多了

让我们来搜索术语

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

    }
}

类搜索框扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onClick=this.onClick.bind（this）；
this.state={repositories:[]，
showInfo:false}；
}
render（）{
让我们来了解更多细节；
if（this.state.showInfo）{
moreDetail=
未结问题计数：{item.Open\u issues\u count}


叉数：{item.forks}


语言：{item.Language}
；
}
返回(
{this.searchBox=input；}}/>
搜寻
存储库

{this.state.repositories.map（（项，索引）=>(
详细视图
)) }

);
}
_handleClick（）{
这是我的国家({
showInfo:！this.state.showInfo
});
}
onClick（事件）{
searchTerm=this.searchBox.value；
让我们来看看https://api.github.com/search/repositories?sort=stars&order=desc&q=“+搜索词；
console.log（searchTerm）；
获取（端点）
.then（blob=>blob.json（））
。然后（响应=>{
this.setState（{repositories:response.items}）；
});
event.preventDefault（）；
}
}

您的右大括号过多。尝试删除多余的一个，看看是否有帮助。您可以粘贴错误消息吗。这里没有看到任何错误：/Thank，是的，一对多的花括号。正如您所看到的，我在{moreDetail}中使用了item.x，但它没有定义，因为我直到稍后才映射它。你知道我该怎么解决这个问题吗？你能不能把缩进移多一点，让代码不那么可读。。。开玩笑的：）我不确定你的问题是什么，但我可以注意到的一件事是，映射函数肯定需要返回一个值，而不是在：this.state.repositories.map（（item，index）=>{retur中返回映射的jsx