使用setState显示来自AJAX请求的内容

我正在使用github搜索API做一个webapp。我希望每个回购协议的信息显示在特定回购协议下。 我希望在按下特定按钮时显示AJAX请求的内容。我在用React。由于我使用item.x来访问获取该项目所需的信息，我假设我需要使用map，但这样做时，它将显示所有结果，而不仅仅是特定存储库的结果。反正我可以得到的项目，因为它目前说它是未定义的

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

    }
}

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（（项，索引）=>(
{moretail}
详细视图
)) }

);
}
_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（）；
}
}

问题在于上下文。定义

moredeail

变量时，上下文中没有

item

（只有在map函数中才有）

一个选项是使用变量

moredeail

作为接收要显示的项目的函数

渲染方法应类似于：

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

render（）{
const moreDetail=（项目）=>（！this.state.showInfo？）：

未结问题计数
：{item.Open\u issues\u count}


叉数
：{item.forks}


语言
：{item.Language}

);
返回(
{this.searchBox=input；}}/>
搜索
存储库

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

);
}