React Native中如何将当前点击条目传递给Modal组件

问题根因 #

你在遍历习惯数据的循环中为每个条目都生成了一个ShowHabitModal实例，所有Modal共用同一个布尔类型的modalVisible状态。当你触发点击把状态设为true时，所有循环生成的Modal都会同时显示，最终你看到的永远是层级最高的最后一个遍历生成的Modal，所以永远显示同一条内容。

最优解决方案 #

把Modal组件从循环中移出，单独放在页面最外层，额外新增一个状态存储当前选中的条目数据即可：

1. 首先新增选中条目状态

// 原有状态保留，新增如下状态
const [selectedHabit, setSelectedHabit] = useState(null);

2. 修改条目的点击逻辑，点击时先存储当前选中的条目

onPress={() => {
    setSelectedHabit(item);
    setModalVisible(true);
    haptics.selection();
}}

3. 将ShowHabitModal从循环中移出，放在页面结构最外层，传入选中的条目数据

<HomepageDataView>
    {habitData !== null &&
        Object.values(habitData).map((item, index) => (
            <HomepageDataBox
                key={index.toString()}
                onPress={() => {
                    setSelectedHabit(item);
                    setModalVisible(true);
                    haptics.selection();
                }}
                style={{ borderBottomWidth: 7, borderBottomColor: `${item.color}` }}
            >
                <Image style={{ height: 50, width: 50 }} source={item.icon} />
                <Text fontFamily="SemiBold" marginLeft="5px">
                    {item.name}
                </Text>
            </HomepageDataBox>
        ))}
</HomepageDataView>
{/*  Modal移到循环外部  */}
{selectedHabit && <ShowHabitModal
    data={selectedHabit}
    modalVisible={modalVisible}
    setModalVisible={setModalVisible}
/>}

4. 可选优化：关闭Modal时清空选中状态，避免下次打开闪现旧数据
   修改Modal组件的关闭逻辑：

onPress={() => {
    setModalVisible(false);
    setSelectedHabit(null);
}}

这种方案只需要渲染一个Modal实例，性能更好，也不会出现多Modal层级冲突的问题。

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