如何从Formik表单中调用Firebase函数并传递邮箱密码参数

1. 调整FirebaseLogin.js工具函数定义 #

你目前的FirebaseLogin是纯工具函数，不需要按照React组件的规则传props，直接将邮箱、密码作为入参接收即可，同时建议返回Promise便于上层处理登录结果：

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

export default function FirebaseLogin(email, password) {
    const auth = getAuth();
    return signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            // 可在这里写通用登录后处理逻辑，也可直接返回用户信息给上层
            return userCredential.user;
        })
        .catch((error) => {
            // 可在这里做通用错误处理，也可抛出错误给上层自定义提示
            throw error;
        });
}

2. 修改LoginScreen.js的提交逻辑 #

在Formik的onSubmit回调中直接调用FirebaseLogin，将表单获取到的邮箱、密码传入即可：

// 顶部先导入工具函数
import FirebaseLogin from './FirebaseLogin';

// ... 组件内其余代码
<Formik
    initialValues={{ email: '', password: '' }}
    onSubmit={async (values) => {
        try {
            // 传入表单的邮箱、密码调用登录接口
            const loginUser = await FirebaseLogin(values.email, values.password);
            // 登录成功后自定义逻辑，例如页面跳转、用户信息存储
            console.log('登录成功', loginUser);
        } catch (err) {
            // 登录失败后自定义逻辑，例如错误提示弹窗
            console.log('登录失败', err.code, err.message);
        }
    }}
>
    {/* 其余表单代码无需修改 */}
    <View>
        <Pressable>
            <Text onPress={handleSubmit}>Login</Text>
        </Pressable>
    </View>
</Formik>

内容的提问来源于stack exchange，提问作者pileup