[英]Modal not updating to new item in array,firebase/react native state
my current issue with my react native app is that when a user wants to open a lesson (from the lessons array with each object being a lesson with a title,description,img url etc)to make it bigger through a modal, its state does not update.我的本机反应应用程序当前的问题是,当用户想要打开一节课时(从课程数组中,每个 object 都是带有标题、描述、img url 等的课程)以通过模态使其变大,其 state 确实不更新。 What i Mean by this is that the books title,description,and other attributes won't change if you press on a new lesson.
我的意思是,如果您按下新课程,书名、描述和其他属性不会改变。 What would be the solution to this?
解决这个问题的方法是什么?
export default function Learn() {
const [modalVisible, setModalVisible] = useState(false);
const [lessons,setLessons] = useState()
useEffect(() => {
async function data() {
try {
let todos = []
const querySnapshot = await getDocs(collection(db, "lessons"));
querySnapshot.forEach((doc) => {
todos.push(doc.data())
});
setLessons(todos)
console.log(lessons)
}
catch(E) {
alert(E)
}
}
data()
}, [])
return (
<View style={learnStyle.maincont}>
<View>
<Text style={{fontSize:28,marginTop:20}}>Courses</Text>
<ScrollView style={{paddingBottom:200}}>
{lessons && lessons.map((doc,key) =>
<>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Image source={{
uri:doc.imgURL
}} style={{width:"100%",height:300}}/>
<Text style={{fontWeight:"700",fontSize:25}}>{doc.title}</Text>
<Text style={{fontWeight:"700",fontSize:16}}>{doc.desc}</Text>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</View>
</Modal>
<LessonCard setModalVisible={setModalVisible} title={doc.title} desc={doc.desc} img1={doc.imgURL} modalVisible={modalVisible}/>
</>
)}
<View style={{height:600,width:"100%"}}></View>
</ScrollView>
</View>
</View>
)
}
**image 1 is before you press the modal and the 2nd one is after **the main issue though is that if you press cancel and press on another lesson the modal that opens has the the same state(title,imgurl,anddesc) as the first lesson and does not change. **图像 1 在您按下模态之前,第二个在之后 **主要问题是,如果您按下取消并按下另一节课,打开的模态具有与以下相同的状态(标题、imgurl 和描述)第一节课并没有改变。
The problem is that you create a lot of modal windows through the map function, I suggest making one window and passing the key as a parameter and using it to search for a specific array of data that is shown to the user (photo, title, etc.)问题是您通过 map function 创建了很多模式 windows,我建议创建一个 window 并将密钥作为参数传递并使用它来搜索显示给用户的特定数据数组(照片、标题、 ETC。)
The problem is that all 3 Modal
s are controlled by the one state variable.问题是所有 3 个
Modal
都由一个 state 变量控制。 So when the code sets modalVisible
to true
, all 3 modals are being opened at once.因此,当代码将
modalVisible
设置为true
时,所有 3 个模式都会同时打开。
You can fix this in a few ways, but a simple way would be to move the Modal
and its state into the LessonCard
component.您可以通过几种方法解决此问题,但一种简单的方法是将
Modal
及其 state 移动到LessonCard
组件中。 This way each modal will have its own state that's only opened by its card.这样每个模式都会有自己的 state,只能由它的卡打开。 So the loop in
Learn
will just be:所以
Learn
中的循环将只是:
{lessons && lessons.map((doc,key) => (
<LessonCard lesson={doc} key={key} />
)}
Adding to address question in comments添加以解决评论中的问题
LessonCard
should not accept setModalVisible
or modalVisible
props. LessonCard
不应接受setModalVisible
或modalVisible
道具。 The这
const [modalVisible, setModalVisible] = useState(false);
should be inside LessonCard
, not Learn
.应该在
LessonCard
里面,而不是Learn
里面。 That way each Card/Modal pair will have its own state.这样每对 Card/Modal 都会有自己的 state。
Additionally, although React wants you to pass the key
into LessonCard
in the map
function, LessonCard
should not actually use the key
prop for anything.此外,虽然 React 希望您将
key
传递到LessonCard
中的map
, LessonCard
实际上不应该使用key
道具做任何事情。 See https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys请参阅https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys
So, the LessonCard
declaration should just be something like所以,
LessonCard
声明应该是这样的
export default function LessonCard({lesson}) {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.