Question

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

    }
}

Answer 1

问题在于背景。定义moreDetail变量时，您的上下文中没有item（仅在您拥有该地图函数的情况下）。

一个选项是使用变量moreDetail作为接收您要显示的项目的函数。

您的渲染方法应如下所示：

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

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

1 个答案: