问题 如何在react native中显示存储在firebase中的内容?

80 阅读1分钟

useEffect(() => { todoRef .orderBy('createAt', 'desc') .onSnapshot( querySnapshot => { const todos = [] querySnapshot.forEach((doc) => { const { heading } = doc.data() todos.push({ id: doc.id, heading, }) }) setTodos(todos) } ) }, [])

//dealate a todo from firebase database

const dealateTodo = (todos) => {
    todoRef
        .doc(todos, id)
        .delete()
        .then(() => {
            // Show a successful alert after deleting
            alert("Deleted Successfully")
        })
        .catch(error => {
            alert(error);
        })
}

// add a todo
const addTodo = (todo) => {
    // checking is there a todo in here
    if (addData && addData.length > 0) {
        // get the timestamp
        const timestamp = firebase.firestore.FieldValue.serverTimestamp();
        const data = {
            heading: addData,
            createdAt: timestamp
        };
        todoRef
            .add(data)
            .then(() => {
                setAddData('');
                Keyboard.dismiss();
            })
            .catch((error) => {
                alert(error);
            })
    }
}
return (
    <View style={styles.flex_1} >
        <ScrollView
            data={todos}
            renderItem={({ item }) => (
                <View>
                    <Pressable
                        style={styles.container}
                        onPress={() => navigation.navigate('Detail', { item })}
                    >
                        <FontAwesome
                            name='trash'
                            color='red'
                            onPress={() => dealateTodo(item)}
                            style={styles.todoIcon}
                        />
                        <View style={styles.innerContainer} >
                            <Text style={styles.itemHeading}>
                                [item.Heading[0].toUpperCase() + item.heading.slice(1)]
                            </Text>
                        </View>
                    </Pressable>
                </View>
            )}
        />
        <View style={styles.formContainer} >
            <TextInput
                style={styles.txt_input}
                placeholder="Enter Task Title"
                placeholderTextColor='#aaaaaa'
                onChangeText={(heading) => setAddData(heading)}
                value={addData}
                underlineColorAndroid='transparent'
                autoCapitalize='none'
            />
            <TouchableOpacity style={styles.button} onPress={addTodo}>
                <Text style={styles.buttonText}>+</Text>
            </TouchableOpacity>
        </View>
    </View>
)

我写了这段代码来显示存储在Firebase中的数据,但它没有显示,谁能帮帮我?(如果你需要完整的文件,请发表评论)