当 isPasscodeEntry 为 true 时，如何调用 newPasswordHandler？

Question

感谢您查看此内容！我正在研究重置密码工作流程。在“isForgot”屏幕上，我输入电子邮件并按“重置密码”，forgotHandler 函数运行，6 位代码存储在 AsyncStorage 中。

    async function forgotHandler({ email }) {
        try {
            await expensesCtx.resetPassword({ email })
        } catch (error) {
            console.error('Error creating user:', error);
        } finally {
            setIsLoading(false)
        }
    }

这也会将 isPasscodeEntry 设置为 true，并且我成功地看到“isPasscodeEntry”屏幕。

这就是问题开始的地方。我输入 6 位数字代码，当我按“提交密码”时，我希望将“isNewPassword”设置为 true 并呈现 isNewPassword 屏幕，我在其中设置新密码。除了我收到错误：

警告可能未处理的 Promise 拒绝（id：0）： 类型错误：onNewPassword 不是函数（未定义）

以下是我的 LoginScreen.js 的相关部分：

function LoginScreen({ navigation }) {
    const expensesCtx = useContext(ExpensesContext);
    const { isAuthenticated } = expensesCtx;
    const [isLogin, setIsLogin] = useState(true);
    const [isForgot, setIsForgot] = useState(false);
    const [isPasscodeEntry, setIsPasscodeEntry] = useState(false);
    const [isNewPassword, setIsNewPassword] = useState(false)

async function forgotHandler({ email }) {
        try {
            await expensesCtx.resetPassword({ email })
        } catch (error) {
            console.error('Error creating user:', error);
        } finally {
            setIsLoading(false)
        }
    }

    async function newPasswordHandler({ passcode }) {
        try {
            // Check if the entered resetCode matches the one stored in AsyncStorage
            const storedCode = await AsyncStorage.getItem('resetCode');
            if (storedCode === passcode) {
                return
            } else {
                console.error('Invalid resetCode');
            }
        } catch (error) {
            console.error('Error creating user:', error);
        } finally {
            setIsLoading(false);
        }
    }

return (
        <SafeAreaView style={styles.container}>
            {!isForgot ? (
                <>

                    {isPasscodeEntry ? (
                        <>
                            {/** Renders the Passcode Entry Screen */}
                            <AuthContent
                                isLogin={isLogin}
                                isPasscodeEntry={isPasscodeEntry}
                                setIsPasscodeEntry={() => setPasscodeEntry}
                                setIsNewPassword={() => setNewPassword}
                                isNewPassword={isNewPassword}
                                setIsForgot={() => setForgot}
                                onNewPassword={() => newPasswordHandler}
                            />
                            <View style={styles.forgot}>
                                <Button onPress={() => { setIsForgot(true), setIsLogin(false) }}>
                                    Forgot Password
                                </Button>
                            </View>
                            <View style={styles.buttons}>
                                <Button onPress={() => setIsLogin(!isLogin)}>
                                    {isLogin ? 'Register Here' : 'Login Here'}
                                </Button>
                                {isLoading && <LoadingOverlay />}
                            </View>
                        </>
                    ) : (
                        <>
                            {/** Renders the Login or Registration Screen */}
                            <AuthContent
                                isLogin={isLogin}
                                isPasscodeEntry={isPasscodeEntry}
                                setIsPasscodeEntry={() => setPasscodeEntry}
                                onSignUp={signUpHandler}
                                onLogin={loginHandler}
                                isNewPassword={isNewPassword}
                                setIsNewPassword={() => setNewPassword}                
                            />
                            {isLogin && (
                                <View style={styles.forgot}>
                                    <Button onPress={() => { setIsForgot(true), setIsLogin(false) }}>
                                        Forgot Password
                                    </Button>
                                </View>
                            )}
                            <View style={styles.buttons}>
                                <Button onPress={() => setIsLogin(!isLogin)}>
                                    {isLogin ? 'Register Here' : 'Login Here'}
                                </Button>
                                {isLoading && <LoadingOverlay />}
                            </View>
                        </>
                    )}
                </>
            ) : (
                <>
                    {/** Renders the Forgot Password or New Password Screen */}
                    <AuthContent
                        isLogin={false}
                        isForgot={isForgot}
                        onForgot={forgotHandler}
                        isPasscodeEntry={isPasscodeEntry}
                        setIsPasscodeEntry={() => setPasscodeEntry()}
                        setIsNewPassword={() => setNewPassword}
                        isNewPassword={isNewPassword}
                    />
                    {!isPasscodeEntry && (
                        <View style={styles.buttons}>
                            <Button onPress={() => setIsForgot(false)}>
                                Go Back
                            </Button>
                            {isLoading && <LoadingOverlay />}
                        </View>
                    )}
                </>
            )}
        </SafeAreaView>
    );

}

export default LoginScreen;

我留下了条件 jsx 渲染，这样你就可以遵循逻辑，也许会看到一些我看不到的东西。

以下是在 LoginScreen.js 中呈现的 AuthContent 的相关部分：

function AuthContent({ isLogin, isForgot, isPasscodeEntry, isNewPassword, setIsForgot, setIsPasscodeEntry, setIsNewPassword, onSignUp, onLogin, onForgot, onNewPassword, enteredCode }) {

if (isForgot && !isPasscodeEntry) {
            // Handle the submission for Passcode Entry screen
            onForgot({ email });
        } else if (isPasscodeEntry) {
            // Handle the submission for New Password screen
            onNewPassword({ passcode });
        } else if 
            // Handle the submission for Login or Registration screen
            (isLogin) {
                onLogin({ email, password });
            } else if (!isLogin) {
                onSignUp({ email, password });
            }
        
    }

    return (
        <View style={styles.authContent}>
            <View style={styles.logoContainer}>
                <Image source={logo} style={styles.logo} resizeMode='contain' />
            </View>
            <View style={styles.logoc}>
                <AuthForm
                    isLogin={isLogin}
                    isForgot={isForgot}
                    isPasscodeEntry={isPasscodeEntry}
                    setIsPasscodeEntry={setIsPasscodeEntry}
                    setIsForgot={setIsForgot}
                    isNewPassword={isNewPassword}
                    onNewPassword={isNewPassword? onNewPassword: undefined}
                    onSubmit={submitHandler}
                    onForgot={isForgot ? onForgot : undefined}
                    credentialsInvalid={credentialsInvalid}
                />

                {loginError && (
                    Alert.alert('Login failed', 'Please check your entered credentials. ')
                )}
            </View>
        </View>
    );
}

export default AuthContent;

当 isPasscodeEntry 为 true 时，我尝试将 onNewPassword 属性添加到 AuthContent，但我仍然收到错误“onNewPassword 不是函数”

{/** Renders the Passcode Entry Screen */}
                            <AuthContent
                                isLogin={isLogin}
                                isPasscodeEntry={isPasscodeEntry}
                                setIsPasscodeEntry={() => setPasscodeEntry}
                                setIsNewPassword={() => setNewPassword}
                                isNewPassword={isNewPassword}
                                setIsForgot={() => setForgot}
                                onNewPassword={() => newPasswordHandler}
                            />

并将其作为 prop 传递给 AuthContent 中的 AuthForm：

<AuthForm
                    isLogin={isLogin}
                    isForgot={isForgot}
                    isPasscodeEntry={isPasscodeEntry}
                    setIsPasscodeEntry={setIsPasscodeEntry}
                    setIsForgot={setIsForgot}
                    isNewPassword={isNewPassword}
                    onNewPassword={isNewPassword? onNewPassword: undefined}
                    onSubmit={submitHandler}
                    onForgot={isForgot ? onForgot : undefined}
                    credentialsInvalid={credentialsInvalid}
                />

Answer 1

我在登录屏幕的 jsx 中添加了“！isNewPassword”，设置新密码屏幕现在正在呈现：

return (
        <SafeAreaView style={styles.container}>
            {!isForgot ? (
                <>

                    {isPasscodeEntry && !isNewPassword? (
                        <>