React Native遍历列表传ID至详情页时State参数未传递问题

咱们一步步拆解你代码里的问题，帮你搞定参数传递的问题：

1. 先解决重复绑定onPress的冲突问题 #

你在TouchableWithoutFeedback、内部View和Text上都绑定了onPress，而且传递的参数一会儿是item.key，一会儿是item.text——这会导致点击时触发多个事件，参数传递完全混乱，肯定出问题。

修复方案：只在最外层的TouchableWithoutFeedback绑定点击事件，内部元素不需要重复绑定（触摸事件会自动冒泡，不需要额外处理）。修正后的渲染函数如下：

_renderList = ({ item }) => {
  return (
    <TouchableWithoutFeedback onPress={() => this._selectedItem(item.key)}>
      <View style={styles.listRowContainer}>
        <View style={styles.listinside1Container}>
          <Image style={styles.listImage} source={item.icon} />
          <View style={styles.listContainer}>
            <Text>{item.text}</Text>
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};

2. 确保_selectedItem正确处理参数并更新State #

接下来要检查你的选中事件方法，是否正确接收参数并把选中的ID存入组件State（如果需要用State暂存的话），同时正确触发跳转。

示例实现参考：

// 先在组件构造函数初始化State
constructor(props) {
  super(props);
  this.state = {
    selectedItemId: null,
  };
}

_selectedItem = (itemId) => {
  // 把选中的ID存入State（如果不需要暂存可以直接跳过这步，直接传参数跳转）
  this.setState({ selectedItemId: itemId }, () => {
    // 这里执行跳转逻辑，比如用react-navigation的navigate方法
    this.props.navigation.navigate('DetailScreen', {
      itemId: this.state.selectedItemId,
    });
    // 也可以直接用传入的参数跳转，避免State异步的问题：
    // this.props.navigation.navigate('DetailScreen', { itemId });
  });
};

小贴士：setState是异步操作，如果在setState后立即访问State，可能拿不到最新值，用回调函数就能确保获取更新后的State。

3. 确认详情页正确接收参数 #

最后要保证详情页能正确拿到传递的参数。如果用的是react-navigation，详情页可以这样获取参数：

// 详情页组件示例
const DetailScreen = ({ route }) => {
  const { itemId } = route.params;
  return (
    <View>
      <Text>选中的Item ID：{itemId}</Text>
    </View>
  );
};

额外排查点 #

• 先确认item.key确实存在且有有效值：可以在_renderList里加console.log(item)，看看你的列表项结构是否符合预期，会不会item.key是undefined。
• 如果用的不是react-navigation，要对应检查你使用的路由库的参数传递规则，确保跳转逻辑正确。

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