求助：FlatList点击项Modal始终显示最后一项item.id的修复方法

核心问题分析 #

1. 重复渲染Modal：你在renderItem里给每个列表项都嵌套了一个Modal，所有Modal共享同一个modalVisible状态，打开时所有Modal会同时触发显示，但最后渲染的列表项Modal会处于最上层，导致你看到的始终是最后一项的id。
2. 结构错误：你的代码里renderItem函数内部还包含了FlatList组件，这会导致每个列表项里都生成一个新的FlatList，完全不符合组件结构逻辑。

修复后的完整代码示例 #

// 父组件状态定义
const [modalVisible, setModalVisible] = useState(false);
const [selectedItemId, setSelectedItemId] = useState(null);

// 修正后的renderItem函数
const renderItem = ({ item }) => {
  return(
    <TouchableOpacity 
      onPress={() => {
        // 先保存当前选中项的id，再打开Modal
        setSelectedItemId(item.id);
        setModalVisible(true);
      }}
    >
      <Text style={styles.item}>{item.task}</Text>
    </TouchableOpacity>
  )
}

// 父组件JSX结构
return(
  <>
    <FlatList
      data={toDoList}
      // extraData包含所有影响渲染的状态，确保状态变化时FlatList正确更新
      extraData={[toDoList, modalVisible, selectedItemId]}
      renderItem={renderItem}
    />
    // 只保留一个Modal，放在FlatList外部
    <Modal 
      animationType="slide"
      transparent={true}
      visible={modalVisible}
    >
      <View style={styles.container}>
        <TouchableOpacity onPress={() => setModalVisible(false)}>
          <Text style={styles.item}>{selectedItemId}</Text>
        </TouchableOpacity>
      </View>
    </Modal>
  </>
)

修复逻辑说明 #

• 共用单个Modal：把Modal从列表项中抽离，在父组件中只维护一个Modal实例，避免重复渲染导致的层级覆盖问题。
• 单独维护选中状态：新增selectedItemId状态，点击列表项时先将当前项的id存入该状态，再打开Modal，确保Modal显示的是当前选中项的id。
• 修正组件结构：将FlatList从renderItem中移出，作为父组件的直接子元素，符合FlatList的使用逻辑。

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