React Native中FlatList点击Item提示listRowPressed未定义问题排查

嘿，我来帮你搞定这个问题！你的代码里有两个核心问题导致了这个错误，咱们一步步来修复：

问题1：函数组件ListComp无法访问父组件的方法 #

ListComp是一个独立的函数组件，它没有父组件HistoryScreen的上下文，直接写this.listRowPressed肯定找不到这个方法——而且函数组件本身就没有this对象，这是第一个报错的根源。

问题2：父组件方法的this指向问题 #

就算把方法传过去，原来的listRowPressed是普通函数，调用时this的指向会丢失，没法正确访问this.props.navigation。

修复步骤 #

1. 把listRowPressed改成箭头函数（自动绑定this）

在HistoryScreen里，把普通函数改成箭头函数，这样就不用手动在constructor里绑定this了：

listRowPressed = (item) => {
  this.props.navigation.navigate('Details', { checkin: item.data });
};

2. 给ListComp传递点击回调和正确的item数据

在FlatList的renderItem里，给ListComp传入onPress属性，把listRowPressed作为回调传过去，同时确保item数据传递正确：

<FlatList
  data={this.state.listData}
  renderItem={({item}) => <ListComp data={item} onPress={() => this.listRowPressed(item)} />}
  keyExtractor={(item, index) => index.toString()}
/>

3. 修改ListComp接收props并调用回调

把ListComp改成接收props的形式，然后在TouchableOpacity的onPress里调用传入的onPress方法：

const ListComp = (props) => (
  <TouchableOpacity onPress={() => props.onPress(props.data)}>
    <View style={styles.row}>
      {/* 这里放你的行内容 */}
    </View>
  </TouchableOpacity>
);

完整修复后的代码 #

export default class HistoryScreen extends BaseScreen { 
  constructor(props){ 
    super(props); 
    this.state = { 
      mainListData:[], 
      listData:[], 
      searchText:'', 
    }; 
  } 

  // 改成箭头函数自动绑定this
  listRowPressed = (item) => { 
    this.props.navigation.navigate('Details', { checkin: item.data }); 
  } 

  render() { 
    return ( 
      <View style={styles.container}> 
        <View style={{ flex:1, backgroundColor: '#FFF'}}> 
          <FlatList 
            data={this.state.listData} 
            // 给ListComp传递onPress回调
            renderItem={({item}) => <ListComp data={item} onPress={() => this.listRowPressed(item)} />} 
            keyExtractor={(item, index) => index.toString()} 
          /> 
        </View> 
      </View> 
    ); 
  } 
} 

// 接收props并调用传入的onPress
const ListComp = (props) => ( 
  <TouchableOpacity onPress={() => props.onPress(props.data)}> 
    <View style={styles.row}> 
      {/* 行内容 */} 
    </View> 
  </TouchableOpacity> 
);

这样修改后，点击列表项时就能正确触发listRowPressed方法，跳转到详情页了～

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