模态未更新为数组中的新项目,firebase/react本地状态

mftmpeh8  于 2022-12-04  发布在  React
关注(0)|答案(2)|浏览(94)

我的react原生应用程序目前的问题是,当用户想要打开一节课(从课程数组中,每个对象都是一节课,带有标题、描述、img url等)以通过模态使其更大时,其状态不会更新。我的意思是,如果你点击一节新课,书籍的标题、描述和其他属性不会改变。对此有什么解决方案?

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>
      )
    }

外观:第一次

图像1是在您按下模态之前,第二个是在之后主要问题是,如果您按下取消并按下另一节课,打开的模态具有与第一节课相同的状态(标题、图像URL和说明),并且不会更改。

sxpgvts3

sxpgvts31#

问题是你通过map函数创建了很多模态窗口,我建议创建一个窗口,并将键作为参数传递,用它来搜索显示给用户的特定数据数组(照片、标题等)。

icnyk63a

icnyk63a2#

问题是所有的3个Modal都是由一个状态变量控制的,所以当代码将modalVisible设置为true时,* 所有的3* 个模态都被同时打开。
有几种方法可以解决这个问题,但是一个简单的方法是将Modal和它的状态转移到LessonCard组件中,这样每个模态都有自己的状态,只能由它的卡打开。因此Learn中的循环将是:

{lessons && lessons.map((doc,key) => (
     <LessonCard lesson={doc} key={key} />
 )}

相关问题