javascript - 为什么我的所有文档都应该被删除，而它只应该执行和删除一个特定的文档？

Question

当我在 React Native 中进入这个屏幕时，我的所有文档都被删除了。如何获取代码以删除 doc.id 为keyin的文档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>
        )
    }

标签： javascriptfirebasereact-nativegoogle-cloud-firestore

Answer 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>