React中已在构造函数绑定this，但仍出现this未定义错误

你已经在构造函数里正确绑定了search方法，但问题出在axios的.then()回调函数的this指向上面！

当你在.then()里使用普通的function(response) {}时，这个函数会创建自己的作用域，内部的this不再指向你的AddSong组件实例，自然就找不到setState方法了。这里有几个简单的解决办法：

方法1：改用箭头函数（最推荐） #

箭头函数不会绑定自己的this，它会继承外层作用域（也就是search方法里）的this，直接就能访问组件实例：

axios.get('https://www.googleapis.com/youtube/v3/search', {
    params: {
        part: 'snippet',
        type: 'video',
        order: 'viewCount',
        key: api,
        q: query,
        maxResults: maxResults
    }
})
.then((response) => { // 这里改成箭头函数
    console.log(response.data);

    var vidComponents = [];

    // 循环处理视频数据
    for (let vidInfo of response.data.items) {
        vidComponents.push(
            <div key={vidInfo.id.videoId}> {/* 这里建议用视频ID作为key，比index更稳定 */}
                <p>title: {vidInfo.snippet.title}</p>
                <p>channel: {vidInfo.snippet.channelTitle}</p>
                <p>id: {vidInfo.id.videoId}</p>
                <p>thumbnailUrl: {vidInfo.snippet.thumbnails.high.url}</p>
            </div>
        );
    }

    this.setState({
        searchResults: vidComponents,
        nextPageToken: response.data.nextPageToken
    });
})
.catch((error) => { // 这里也可以改成箭头函数
    console.log(error);
}); 

方法2：提前保存组件的this #

在search方法开头，把组件实例的this存到一个变量里，比如self，然后在回调里用这个变量调用setState：

search(e){
    // 先保存组件的this
    const self = this;
    var api = this.props.apiKey;
    var query = this.state.searchText;
    var maxResults = 10;

    axios.get('https://www.googleapis.com/youtube/v3/search', {
        params: {
            part: 'snippet',
            type: 'video',
            order: 'viewCount',
            key: api,
            q: query,
            maxResults: maxResults
        }
    })
    .then(function (response) {
        console.log(response.data);

        var vidComponents = [];

        for (let vidInfo of response.data.items) {
            vidComponents.push(
                <div key={vidInfo.id.videoId}>
                    <p>title: {vidInfo.snippet.title}</p>
                    <p>channel: {vidInfo.snippet.channelTitle}</p>
                    <p>id: {vidInfo.id.videoId}</p>
                    <p>thumbnailUrl: {vidInfo.snippet.thumbnails.high.url}</p>
                </div>
            );
        }

        // 用self代替this
        self.setState({
            searchResults: vidComponents,
            nextPageToken: response.data.nextPageToken
        });
    })
    .catch(function (error) {
        console.log(error);
    }); 
}

方法3：手动绑定回调的this #

给.then()的回调函数用bind(this)绑定组件实例的this：

.then(function (response) {
    // 你的处理代码
    this.setState({
        searchResults: vidComponents,
        nextPageToken: response.data.nextPageToken
    });
}.bind(this)) // 这里绑定this

另外提个小建议：你之前用循环变量i作为元素的key，这在React里是不推荐的——如果数组元素的顺序发生变化，会导致React的DOM diff出现问题。最好用每个视频唯一的vidInfo.id.videoId作为key，就像上面代码里改的那样。

内容的提问来源于stack exchange，提问作者Chris Ragsdale