React组件无法识别函数？新手构建Filter组件遇技术问题

嘿，刚上手React的时候确实会碰到这种文档没直接点明的细节问题，我来帮你梳理下~

从你贴的代码来看，核心问题出在AJAX回调函数的this指向上：你用了普通的function作为success回调，这时候回调里的this并不是FilterBar组件的实例，所以当你想调用this.setState这类组件方法时，就会出现"无法识别函数"的错误（你代码里的th...应该是想写this吧😉）。

这里给你三种常见的解决办法：

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

箭头函数会自动继承外层作用域的this，也就是组件实例，这样就能直接调用组件方法了：

componentDidMount() {
  $.ajax("/activeFilters", {
    success: (e) => {
      // 这里的this就是FilterBar组件实例
      this.setState({ 
        activeFilters: e,
        // 如果接口返回可用属性数据，也在这里更新
        // availableAttributes: e.attributes
      });
    }
  });
}

方法2：提前保存this的引用 #

在AJAX调用前把组件的this存到一个变量里（比如that），回调里用这个变量来访问组件：

componentDidMount() {
  const that = this;
  $.ajax("/activeFilters", {
    success: function(e) {
      that.setState({ activeFilters: e });
    }
  });
}

方法3：用bind绑定this #

通过bind方法把回调函数的this绑定到组件实例上：

componentDidMount() {
  $.ajax("/activeFilters", {
    success: function(e) {
      this.setState({ activeFilters: e });
    }.bind(this)
  });
}

另外还要提醒你几个小细节：

• 确保jQuery已经正确引入到你的项目中，不然$会被识别为未定义
• 你的availableAttributes初始是个空数组，如果需要从接口获取这部分数据，记得在success回调里一起更新state

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