React.js调用GIPHY API开发GIF搜索引擎遇setState报错求助

嘿，这个错误我刚学React的时候也踩过坑！核心原因就是回调函数里的this指向跑偏了，导致找不到组件的setState方法。结合你用GIPHY API的场景，给你几个实用的解决办法：

• 用箭头函数自动绑定this
  箭头函数会自动继承外层作用域的this，在API请求的回调里用它就不用操心指向问题了。比如：

  fetch('https://api.giphy.com/v1/gifs/search?q=cat&api_key=YOUR_API_KEY')
    .then(response => response.json())
    .then(data => {
      // 这里的this就是组件实例，能正常调用setState
      this.setState({ gifs: data.data });
    })
    .catch(err => console.log('请求出错啦:', err));
  

• 提前存好this的引用
  如果习惯用普通函数写回调，可以在请求前把组件的this存到一个变量里（比如that），回调里用这个变量就行：

  const that = this;
  fetch('https://api.giphy.com/v1/gifs/search?q=dog&api_key=YOUR_API_KEY')
    .then(function(res) {
      return res.json();
    })
    .then(function(data) {
      that.setState({ gifs: data.data });
    });
  

• 给回调函数手动bind组件的this
  你也可以直接给回调函数绑定组件的this，确保它指向正确：

  fetch('https://api.giphy.com/v1/gifs/search?q=rabbit&api_key=YOUR_API_KEY')
    .then(res => res.json())
    .then(function(data) {
      this.setState({ gifs: data.data });
    }.bind(this)); // 这里绑定this到组件实例
  

• 额外提醒：自定义方法要先绑定this
  如果你是在组件的自定义方法里发起API请求，记得先把这个方法的this绑定到组件实例上。比如在构造函数里处理：

  constructor(props) {
    super(props);
    this.state = { gifs: [] };
    // 绑定自定义方法的this
    this.searchGifs = this.searchGifs.bind(this);
  }
  
  searchGifs() {
    // 这里的this已经正确指向组件了
    fetch('https://api.giphy.com/v1/gifs/search?q=bird&api_key=YOUR_API_KEY')
      .then(res => res.json())
      .then(data => this.setState({ gifs: data.data }));
  }
  

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