React Native Todo List应用：声明的点击处理函数传递时提示未定义

嘿，我帮你搞定这个问题～ 你遇到的this.handleTodoPress提示未定义的情况，核心原因是**renderItem函数的this指向没有绑定到你的组件实例**，所以它找不到你已经绑定好的点击处理函数。下面给你几个简单的解决方案：

方案1：把renderItem改成箭头函数（最推荐） #

箭头函数会自动继承当前上下文的this，直接就能访问到组件里的handleTodoPress：

// 直接用箭头函数定义renderItem
renderItem = ({section, item}) => { 
  return (
    <TodoItem 
      onItemPress={this.handleTodoPress} 
      title={item.title} 
      description={item.description} 
      completed={item.completed} 
    />
  )
}

方案2：在构造函数里绑定renderItem的this #

和你绑定handleTodoPress的方式一样，给renderItem也绑定组件实例的this：

constructor(props) { 
  super(props) 
  this.handleTodoPress = this.handleTodoPress.bind(this)
  // 新增这行，绑定renderItem的this
  this.renderItem = this.renderItem.bind(this) 
} 

// 保持renderItem为普通函数即可
renderItem ({section, item}) { 
  return (
    <TodoItem 
      onItemPress={this.handleTodoPress} 
      title={item.title} 
      description={item.description} 
      completed={item.completed} 
    />
  )
}

方案3：调用renderItem时用箭头函数包裹 #

如果你是在FlatList这类组件里使用renderItem，可以在传入的时候用箭头函数包裹，强制绑定this：

<FlatList
  data={yourTodoListData}
  // 用箭头函数包裹，确保this指向组件实例
  renderItem={({section, item}) => this.renderItem({section, item})}
  keyExtractor={(item) => item.id.toString()}
/>

⚠️ 注意：这个方案每次渲染都会创建新的函数，小项目里影响不大，但如果列表数据很多，可能会有轻微的性能损耗，所以更推荐前两种方案。

选其中一种改完之后，你的TodoItem应该就能正常接收到onItemPress函数啦～

内容的提问来源于stack exchange，提问作者ItsT-Mo