我在向Firebase数据库发送数据时遇到了一个非常神秘的问题

Question

我正在使用React native和Firebase创建一个简单的聊天应用程序。但是我无法使用sendMessage函数发送我想要添加到数据库中的数据。我收到类似这样的错误，并且找不到解决方案。你能帮帮我吗?我找不到addDoc ()的位置，也不知道SyntheticObject是什么意思。我有一个这样的问题，尽管我不完全遵守我跟随项目的教程视频中所说的。

错误图像：https://i.resmim.net/i/WhatsApp-Image-2021-05-25-at-21.34.11.jpeg错误:函数addDoc()数据无效。

import React, {useLayoutEffect, useState} from 'react'
import { TouchableOpacity } from 'react-native';
import { StyleSheet, Text, View } from 'react-native'
import {Avatar} from "react-native-elements";
import {AntDesign, FontAwesome, Ionicons} from "@expo/vector-icons";
import { SafeAreaView } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { KeyboardAvoidingView, TextInput } from 'react-native';
import { Platform } from 'react-native';
import { ScrollView } from 'react-native';
import { Keyboard } from 'react-native';
import { TouchableWithoutFeedback } from 'react-native';
import { db, auth } from '../firebase';
import * as firebase from "firebase";

const ChatScreen = ({ navigation, route }) => {
    const [input, setInput] = useState("");



    useLayoutEffect(() => {
        navigation.setOptions({
            title: "Chat",
            headerBackTitleVisible: false,
            headerTitleAlign: "left",
            headerTitle: () => (
                <View 
                style={{
                    flexDirection: "row",
                    alignItems: "center",

                }}>
                <Avatar rounded source={{uri: "https://cencup.com/wp-content/uploads/2019/07/avatar-placeholder.png",}} />
                <Text
                style={{color: "white", marginLeft: 10, fontWeight: "700"}}
                >{route.params.chatName}</Text>
                </View>
            ),
            headerLeft: () => (
                <TouchableOpacity
                style={{marginLeft: 10}}
                onPress={navigation.goBack}
                >
                    <AntDesign name="arrowleft" size={24} color="white" />
                </TouchableOpacity>
            ),
            headerRight: () => (
                <View
                style={{
                    flexDirection: "row",
                    justifyContent: "space-between",
                    width: 80,
                    marginRight: 20,
                }}>
                    <TouchableOpacity>
                        <FontAwesome name="video-camera" size={24} color="white" />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Ionicons name="call" size={24} color="white" />
                    </TouchableOpacity>
                </View>
            )
        });
    }, [navigation]);



    const sendMessage = () => {
        Keyboard.dismiss();

        db.collection('chats').doc(route.params.id).collection('messages').add({
            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
            message: input,
            displayName: auth.currentUser.displayName,
            email: auth.currentUser.email,
            photoURL: auth.currentUser.photoURL
        })

        setInput('')

    };


    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: "white"}}>
            <StatusBar style="light" />
            <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
            style={styles.container}
            keyboardVerticalOffset={90}>
                <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                <>
                <ScrollView>
                </ScrollView>
                <View style={styles.footer}>
                    <TextInput 
                    placeholder="Signal Message"
                    value={input}
                    onChange={text => setInput(text)}
                    onSubmitEditing={sendMessage}
                     style={styles.textInput}/>
                     <TouchableOpacity onPress={sendMessage} activeOpacity={0.5}>
                         <Ionicons name="send" size={24} color="#2B68E6" />
                     </TouchableOpacity>

                </View>
                </>
                </TouchableWithoutFeedback>
            </KeyboardAvoidingView>
        </SafeAreaView>
    )
}

export default ChatScreen

const styles = StyleSheet.create({
    container: {
        flex:1,


    },
    footer: {
        flexDirection: "row",
        alignItems: "center",
        width: "100%",
        padding: 15,
    },
    textInput:{
        bottom: 0,
        height: 40,
        flex: 1,
        marginRight: 15,
        backgroundColor: "#ECECEC",
        padding: 10,
        color: "grey",
        borderRadius: 30,
    },
})

错误图片：https://i.resmim.net/i/WhatsApp-Image-2021-05-25-at-21.34.11.jpeg

Answer 1

onChange={text => setInput(text)}

虽然您已经将参数称为"text"，但它实际上是一个事件对象，特别是"SyntheticEvent“(这些是react使用的事件对象)。因此，稍后当您尝试将其发送到数据库时，firebase基本上会说，“嗯，我不能序列化它”。

相反，您可能希望使用onChangeText事件：

onChangeText={text => setInput(text)}

Answer 2

onChange函数应该如下所示

onChange={e => setInput(e.nativeEvent.text)}

您发送的是事件对象，而不是文本

您也可以改用onChangeText prop

onChangeText={text => setInput(text)}