对产品列表调用modal会打开所有产品的modal，而不是只打开正在调用的产品

Question

我正在制作一个react原生应用程序，它从谷歌firebase加载数据，然后在页面上显示，当用户点击任何产品时，aa modal都会打开以显示更多数据。

我正在使用useEffect加载页面加载数据，然后显示结果：

const fetchData = async () => {
const categories = db.collection("productsDB");
const collections = await categories
.limit(6)
.onSnapshot((querySnapshot) => {
const items = [];
querySnapshot.forEach((documentSnapshot) => {
items.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
});
setItems(items);
setLoading(false);
});
return () => collections();
};
useEffect(() => {
fetchData();
}, []);

并显示如下：

{loading ? (
<ActivityIndicator />
) : (
items.map((item) => (
<TouchableOpacity
style={styles.queryResult}
key={item.key}
onPress={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.queryResultContent}>
<Image
style={{ width: 100, height: 100 }}
source={{ uri: String(item.images) }}
/>
<View>
<Text style={styles.queryInfoHeader}>{item.name}</Text>
</View>
</View>
<View>
<ProductModal
isModalVisible={modalVisible}
setModalVisible={setModalVisible}
navigation={navigation}
{...item}
/>
</View>
</TouchableOpacity>
))
)}

当我打开模态时，它会打开所有产品的模态，不管我是点击第一个产品还是什么，它都会打开所有模态，我不知道如何摆脱它！

有没有更好的方法来编写这个函数？

Answer 1

所有模态都使用相同的modalVisible标志；因此，它们要么全部可见，要么全部隐藏。

为什么不使用单个模态而不是在循环中渲染一堆模态，并将项目作为道具传递给它呢？