使用文本输入更新功能组件中的 Firebase 文档答案

【问题标题】：Update Firebase Document in Functional Component with Text Inputs使用文本输入更新功能组件中的 Firebase 文档
【发布时间】：2021-07-20 07:54:24
【问题描述】：

这是我的屏幕，用户可以访问它来编辑/更新他们的详细信息。我的问题是当按下保存按钮时，我似乎无法从输入中获取要用作新数据的值。它抱怨成为一个函数。如何将我的状态转换为函数以更新 firebase 文档？

const UserProfileEditScreen = ({ navigation }) => {

    const user = auth.currentUser;
    const [userData, setUserData] = useState({});

    const getUser = async() => {
        const currentUser = await firestore
        .ref('users')
        .doc(user.uid)
        .get()
        .then((documentSnapshot) => {
          if( documentSnapshot.exists ) {
            setUserData(documentSnapshot.data());
          }
        })
    }

    const [displayName, setNewDisplayName] = useState('');
    const [name, setName] = useState('');
    const [surname, setSurname] = useState('');
    const [birthdate, setBirthdate] = useState('');
    
    const handleUpdate = () => {
        firestore.collection('users').doc(user.uid).set({
            displayName: setNewDisplayName,
            name: setName,
            surname: setSurname,
        }).then(() => {
            console.log('User Updated!');
            Alert.alert(
              'Profile Updated!',
              'Your profile has been updated successfully.'
            );
        });
        navigation.navigate('Profile');
    }

    useEffect(() => {
        getUser();
    }, [])        

    return (
        <DismissKeyboard>
        <View style={styles.container}>
            <View style={styles.insideContainer}>
                <Text style={[styles.headTextH2, styles.whiteText]}>Edit Account</Text>
                <View style={{marginBottom:45}}></View>
                <Text style={[styles.headTextH3, styles.whiteText]}>Display Name</Text>
                <TextInput
                    style={styles.inputStyles}
                    placeholder={userData.displayName}
                    placeholderTextColor="#000"
                    value={displayName}
                    onChangeText={setNewDisplayName}
                />
                <Text style={[styles.headTextH3, styles.whiteText]}>Name</Text>
                <TextInput
                    style={styles.inputStyles}
                    placeholder={userData.name}
                    placeholderTextColor="#000"
                    value={name}
                    onChangeText={setName}
                /> 
                <Text style={[styles.headTextH3, styles.whiteText]}>Surname</Text>
                <TextInput
                    style={styles.inputStyles}
                    placeholder={userData.surname}
                    placeholderTextColor="#000"
                    value={surname}
                    onChangeText={setSurname}
                />                                             
                <OGButton title="Save Changes" onPress={()=> handleUpdate()} />
            </View>            
        </View>
        </DismissKeyboard>
    )
}

错误信息：

【问题讨论】：

可以分享一下错误截图吗？

标签： firebase react-native google-cloud-firestore

【解决方案1】：

setName, setSurname 是用于分别设置name 和surname 值的函数，您将它们传递给Firestore 的set 方法。

const [displayName, setNewDisplayName] = useState('');
const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [birthdate, setBirthdate] = useState('');

相反，您应该像这样传递值：

firestore.collection('users').doc(user.uid).set({
  displayName, name, surname
})

【讨论】：

太棒了，我明白了，感谢还进行了调整以更新而不是设置文档字段。否则它可能会更新空字段。