Когда я захожу на этот экран в React Native, все мои документы удаляются. Как я могу получить код для удаления документа с doc.id key в deleteTodo(). Я думал, что deleteTodo будет выполняться только при нажатии TouchableOpacity, но он запускается, когда я выхожу на экран.

useEffect(() => {
        firebase
         .firestore()
         .collection('users')
         .doc(uid)
         .collection('tasks')
         .get()
         .then((snapshot) => {
       
           const docList = []
       
           snapshot.forEach((doc) => {
             docList.push({
                 key: doc.id,
                 task: doc.data().task,
                 completed: doc.data().completed,
             });
           })
           setList(docList);
         })
         .catch((error) => {
           console.log(error)
         })
       }, [])

       function deleteTodo(key) {
        var uid = firebase.auth().currentUser.uid;

        firebase.firestore().collection('users').doc(uid).collection('tasks').doc(key).delete().then(() => {
            console.log("Successfully deleted document!")
        }).catch(error => console.log(error));
   }

       swipeRight = (key) => {
           return(
            <View style={styles.rightAction}>
                <TouchableOpacity onPress={deleteTodo(key)}>
                    <Icon name="trash" size={28} color={"red"} />
                </TouchableOpacity>
           </View>
           )
       }

        return (
            <View style={styles.container}>
                <Text style={styles.title}>Here is your tasks for today</Text>
                    <View style={styles.taskList}>
                        <FlatList style={{width: '100%'}}
                            data={list}
                            keyExtractor={(item) => item.key}
                            renderItem={({item}) => {
                                return(
                                    <Swipeable renderRightActions={() => swipeRight(item.key)}>
                                        <TouchableOpacity style={styles.task} onPress={() => console.log("This button got pressed")}>
                                            <Text style={{margin: 15, textDecorationLine: item.completed ? 'line-through' : 'none'}}>{item.task}</Text>
                                        </TouchableOpacity>
                                    </Swipeable>
                                )
                            }}
                        />
                    </View>
                <View style={styles.taskcreation}>
                    <TextInput
                        style={styles.inputBox}
                        value={task}
                        onChangeText={(task) => setTask(task)}
                        placeholder='What do you want to do?'
                    />
                    <TouchableOpacity style={styles.button} onPress={handleTaskCreation}>
                        <Text style={styles.buttonText}>Create task</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
0
Daniel Olsen 2 Мар 2021 в 13:56

1 ответ

Лучший ответ

Так как вы находитесь внутри плоского списка и используете элемент в рендере, измените ключ на элемент, как показано ниже:

 const deleteTodo = (item) => {
  const uid = firebase.auth().currentUser.uid;

  firebase
   .firestore()
   .collection('users')  
   .doc(uid)
   .collection('tasks')
   .doc(item.key)
   .delete()
   .then(() => {
      console.log("Successfully deleted document!")
    })
   .catch(error => console.log(error));
 }


 const swipeRight = (item) => {
     return (
       <RectButton onPress={() => deleteTodo(item)}>
          <Icon name="trash" size={28} color={"red"} />
       </RectButton>
     );
 };

Для смахиваемого

  <Swipeable renderRightActions={() => swipeRight(item)}>
    <Text style={{margin: 15, 
      textDecorationLine: item.completed ? 'line- 
      through' : 'none'}}>
         {item.task}
    </Text>
  </Swipeable>
0
undefined 2 Мар 2021 в 13:14