上滑加载更多时报错：this._fetchData(page)不是函数？求助

看起来你在实现上滑加载更多功能时碰到了这个常见的问题，我来帮你分析下原因和对应的解决办法：

核心原因：this指向丢失 #

你在componentDidMount里调用this._fetchData(1)是正常的，因为这个生命周期函数里的this默认指向组件实例。但上滑加载的回调函数（比如滚动监听事件、下拉刷新组件的onLoadMore钩子）里，如果没有正确绑定this，就会导致this不再指向组件实例，自然找不到_fetchData这个方法，就会抛出“不是函数”的错误。

具体解决办法 #

这里给你三种常用的修复方式，选一种适合你的就行：

1. 用箭头函数定义_fetchData方法 #

箭头函数会自动绑定当前上下文的this，这样不管在哪里调用，this都指向组件实例：

componentDidMount(){ 
  this._fetchData(1) 
}

// 用箭头函数定义请求方法
_fetchData = (page) => {
  // 这里可以直接用this，不需要再存that
  if(page !== 0){
    this.setState({ isLoadingData: true })
  }else{
    this.setState({ isRefreshing: true })
  }
  try {
    // 你的请求逻辑...
  } catch (error) {
    // 错误处理...
  }
}

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

如果你习惯用普通函数定义方法，可以在组件的构造函数里把_fetchData的this绑定到组件实例：

constructor(props) {
  super(props);
  // 手动绑定this，确保方法内的this指向组件实例
  this._fetchData = this._fetchData.bind(this);
}

componentDidMount(){ 
  this._fetchData(1) 
}

_fetchData(page) {
  const that = this
  if(page !== 0){
    this.setState({ isLoadingData: true })
  }else{
    this.setState({ isRefreshing: true })
  }
  try {
    // 你的请求逻辑...
  } catch (error) {
    // 错误处理...
  }
}

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

如果不想修改方法定义，也可以在触发上滑加载的回调里用箭头函数包裹调用：
比如你的上滑加载触发逻辑可能是这样的（假设是某个组件的onLoadMore属性）：

// 用箭头函数包裹，确保调用时this指向组件实例
<ScrollView onLoadMore={() => this._fetchData(nextPage)}>

这样就能保证调用_fetchData时的this是组件实例，自然就能找到这个方法了~

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