React中TypeError: _this2.setState is not a function错误的原因及解决

嘿，这个问题我帮不少开发者排查过，咱们先搞清楚为啥会出这个错，再给你几个靠谱的解决办法～

出错原因 #

在React的Class组件里，你直接定义的videoSearch方法，默认不会把this绑定到组件实例上。当axios的异步回调（.then里的函数）执行时，this的上下文已经变了，不再指向你的App组件实例，自然就找不到setState方法，所以抛出了这个错误。

顺便提个小细节：你API请求URL里的&可以直接改成&，模板字符串里不需要做转义处理哦。

解决办法 #

这里给你三种常用的方案，你可以根据自己的习惯选：

1. 在构造函数里手动绑定this #

这是最经典的做法，在组件的constructor里把方法和组件实例的this绑定起来：

class App extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { movies: [] }; 
    // 关键：把videoSearch的this绑定到组件实例
    this.videoSearch = this.videoSearch.bind(this);
  } 

  videoSearch(term) { 
    axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${APIkey}&query=${term}&page=1`) 
      .then(response => this.setState({movies: response.data.results}))
      .catch(err => console.error('请求失败:', err));
  }
}

2. 用箭头函数定义组件方法 #

箭头函数会自动捕获外层作用域的this（也就是组件实例），这样就不用手动绑定了：

class App extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { movies: [] }; 
  } 

  // 用箭头函数定义videoSearch
  videoSearch = (term) => { 
    axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${APIkey}&query=${term}&page=1`) 
      .then(response => this.setState({movies: response.data.results}))
      .catch(err => console.error('请求失败:', err));
  }
}

3. 调用方法时用箭头函数包裹 #

如果是在事件处理里调用videoSearch，可以用箭头函数临时绑定this：
比如在render方法里：

render() {
  return (
    <button onClick={() => this.videoSearch('复仇者联盟')}>搜索电影</button>
  );
}

不过这种方式每次组件渲染都会创建新的箭头函数，性能上略逊于前两种，适合简单场景。

内容的提问来源于stack exchange，提问作者Rony Aparicio