将数据从Formik的onSubmit传递到Firestore

7 浏览
0 Comments

将数据从Formik的onSubmit传递到Firestore

我正在尝试将Formik与Firestore连接起来，以构建一种“编辑”屏幕。我已经使用Formik设置了表单和字段，并且可以将当前数据从Firebase中作为初始字段值加载。我在将Formik的onSubmit（）中更新的数据发送到我的updateVessel（）上遇到了问题。

这是我的代码：

const VesselEditScreen = props => {
    const vesselId = props.route.params.vesselId;
    const vesselName = props.route.params.vesselName;
    // ===================================================================================
    // 设置Firebase
    // 设置数据库位置
    const ref = db.collection('vessels');
    // 设置状态
    const [loading, setLoading] = useState(true);
    const [vesselData, setVesselData] = useState();
    // 处理加载数据
    useEffect(() => {
        return ref.doc(vesselId).onSnapshot(documentSnapshot => {
            const vessel = documentSnapshot.data();
            setVesselData(vessel);
            if (loading) {
                setLoading(false);
            }
        });
    }, []);
    // 处理更新数据
    async function updateVessel() {
        await ref.doc(vesselId).update({
            // 不确定怎么写？
        });
    }
    // ===================================================================================
    // 检查是否正在加载/保存数据
    if (loading) {
        return 
    };
    // ===================================================================================
    // 渲染表单
    return (
        
            
                编辑 {vesselName}
                 {
                        const { name, breadth, callsign } = values;
                        updateVessel();
                    }}
                >
                    {({ handleChange, handleBlur, handleSubmit, values }) => (

我在这里漏掉了什么？提前感谢任何提示！

0

2 答案

0 Comments

从上述内容中可以整理出以下原因和解决方法：

原因：

- 使用Formik提交表单数据到Firestore时，存在空值或null值会导致Firebase保存失败。

解决方法：

1. 添加一个函数来移除空值或null值：

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

2. 在Formik的onSubmit中调用这个函数：

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

3. 创建一个用于更新Firebase中vessel的函数：

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

以上就是解决“Passing data from Formik onSubmit to Firestore”问题的原因和解决方法。通过添加removeEmpty函数来移除空值或null值，然后在Formik的onSubmit中调用这个函数，最后通过updateVessel函数将更新后的数据保存到Firebase中。

0
0 Comments

问题的原因是希望在Formik的onSubmit事件中将数据传递给Firestore进行更新，但不清楚如何实现。解决方法是将onSubmit事件中的值传递给一个函数，该函数将用于更新Firebase。

首先，在onSubmit中提取所需的值，并将其传递给updateVessel函数：

onSubmit={values => {
    const { name, breadth, callsign } = values;
    updateVessel({ name, breadth, callsign });
}}

然后，将这些值传递给update函数，用于更新Firestore中的文档：

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

如果不确定如何更新单个文档，可以参考这个问题中的更多细节：question

0