将数据从 Formik onSubmit 传递到 Firestore

Question

我正在尝试连接 Formik 以将更新的表单数据发送到 Firestore 以构建一个 "edit" 屏幕。

我已经使用 Formik 设置了表单和字段，并且可以从 Firebase 加载当前数据作为初始字段值。我坚持将更新的数据从 Formik 的 onSubmit() 发送到我的 updateVessel()。

这是我的代码：

const VesselEditScreen = props => {

    const vesselId = props.route.params.vesselId;
    const vesselName = props.route.params.vesselName;

    // ===================================================================================
    // Set up Firebase

    // Set db location
    const ref = db.collection('vessels');

    // Set up state
    const [loading, setLoading] = useState(true);
    const [vesselData, setVesselData] = useState();

    // Handle load data
    useEffect(() => {
        return ref.doc(vesselId).onSnapshot(documentSnapshot => {

            const vessel = documentSnapshot.data();
            setVesselData(vessel);

            if (loading) {
                setLoading(false);
            }

        });
    }, []);

    // Handle update data
    async function updateVessel() {
        await ref.doc(vesselId).update({
            // Not sure here?
        });
    }

    // ===================================================================================
    // Check if we're loading/saving data

    if (loading) {
        return <LoadingSpinner />
    };

    // ===================================================================================
    // Render form

    return (
        <ScreenWrapper>

            <StandardBox>

                <HeadingOne>Edit {vesselName}</HeadingOne>

                <Formik
                    initialValues={{
                        name: vesselData.name,
                        breadth: vesselData.breadth,
                        callsign: vesselData.callsign
                    }}
                    onSubmit={values => {
                        const { name, breadth, callsign } = values;
                        updateVessel();
                    }}
                >
                    {({ handleChange, handleBlur, handleSubmit, values }) => (
                    <View>

                        <TextInput onChangeText={handleChange('name')} onBlur={handleBlur('name')} value={values.name} />
                        <TextInput onChangeText={handleChange('breadth')} onBlur={handleBlur('breadth')} value={values.breadth} />
                        <TextInput onChangeText={handleChange('callsign')} onBlur={handleBlur('callsign')} value={values.callsign} />

                        <Button onPress={handleSubmit} title="Submit" />

                    </View>
                    )}
                </Formik>

            </StandardBox>

        </ScreenWrapper>
    );

};

export default VesselEditScreen;

我在这里错过了什么？感谢您提前提供任何提示！

Answer 1

您需要将 onSubmit 的值传递给将更新 firebase

的函数

onSubmit={values => {
    const { name, breadth, callsign } = values;
    // passing the values you want
    updateVessel({ name, breadth, callsign });
}}

然后传给update

async function updateVessel(values) {
    await ref.doc(vesselId).update(values);
}

如果您不确定如何更新单个文档，可以查看此question了解更多详细信息

Answer 2

我最后添加了以下函数来删除阻止 firebase 保存的 empty/null 值：

const removeEmpty = (obj) => {
    Object.keys(obj).forEach((key) => (obj[key] == null) && delete obj[key]);
    return obj;
}

然后在我的 Formik onSubmit 中这样调用它：

onSubmit={values => {
    updateVessel( removeEmpty(values) );
}}

然后我在 Firebase 中更新容器的函数：

async function updateVessel(values) {
    await ref.doc(vesselId).update(values);
    props.navigation.navigate('DashboardScreen');
}

将数据从 Formik onSubmit 传递到 Firestore

Passing data from Formik onSubmit to Firestore

firebase

react-native

google-cloud-firestore

formik