如何修复 {item.id} 始终等于 FlatList 数组中最后一项的 id？

Question

const renderItem = ({ item }) => {
    return(
      <TouchableOpacity onPress={() => setModalVisible(true)}>
        <Text style={ styles.item }>{item.task}</Text>
        <Modal animationType="slide"
        transparent={true}
        visible={modalVisible}
        >
        <View style={styles.container}>
          <TouchableOpacity onPress={() => setModalVisible(false)}>
            <Text style={styles.item}>{item.id}</Text>
          </TouchableOpacity>
        </View>
      </Modal>
      </TouchableOpacity>


<FlatList
      data={toDoList}
      extraData={toDoList}
      renderItem= {renderItem} />
    )
  }

这应该显示我在模态中按下的平面列表项的 ID。但是，当我单击它时，它始终默认为数据中最后一个项目的 ID，即 5。最顶部的 {item.task} 工作正常，并且我的所有平面列表项目都有正确的名称，但是每当我单击它们时，模态框都会显示 ID 5，而不是它们的 ID。我怎样才能解决这个问题？我还有一个功能，可以将项目添加到平面列表中，并且添加的按钮也有正确的名称，但是当单击时，模态显示我的数据中最后一个项目的 ID（5,6,7 等）当我添加项目时打开）。

Answer 1

您应该从 renderItem 中删除 Modal 组件。因为所有项目模态都具有相同的可见值。所以你总是在模态中显示最后一个项目信息。 你可以使用它；

const [selectedItem, setSelectedItem] = useState()

const clickItem = (item)=>{
setSelectedItem(item)
setModalVisible(true)
}

const renderItem = ({ item }) => {
    return(
      <TouchableOpacity onPress={() => clickItem(item)}>
        <Text style={ styles.item }>{item.task}</Text>
      </TouchableOpacity> )}

将模态组件添加到下面的平面列表中；

<Modal animationType="slide"
            transparent={true}
            visible={modalVisible}
            >
            <View style={styles.container}>
              <TouchableOpacity onPress={() => setModalVisible(false)}>
                <Text style={styles.item}>{selectedItem.id}</Text>
              </TouchableOpacity>
            </View>
          </Modal>