isPasscodeEntry为true时调用newPasswordHandler报函数未定义错误

问题概述 #

开发重置密码流程时，在isForgot页面输入邮箱点击“Reset Password”后，成功进入验证码输入页面，但输入验证码点击“Submit Passcode”时，触发错误：

WARN Possible Unhandled Promise Rejection (id: 0): TypeError: onNewPassword is not a function (it is undefined)

错误原因分析 #

1. 函数传递方式错误：在LoginScreen的isPasscodeEntry分支中，onNewPassword被错误包装为返回函数引用的箭头函数，导致传递给AuthContent的不是可调用的函数。
2. 缺失必要属性传递：在isForgot分支的AuthContent中，当isPasscodeEntry为true时，未传入onNewPassword属性，导致AuthContent调用时该值为undefined。
3. State setter传递错误：多处setIsPasscodeEntry、setIsNewPassword等setter被错误包装，可能导致状态无法正确更新，进而影响流程分支判断。
4. 验证成功后未触发状态切换：newPasswordHandler中验证码验证成功后，未执行setIsNewPassword(true)，无法进入新密码设置页面。

修复步骤 #

1. 修正LoginScreen中isPasscodeEntry分支的AuthContent属性传递 #

原代码：

<AuthContent
    isLogin={isLogin}
    isPasscodeEntry={isPasscodeEntry}
    setIsPasscodeEntry={() => setPasscodeEntry}
    setIsNewPassword={() => setNewPassword}
    isNewPassword={isNewPassword}
    setIsForgot={() => setForgot}
    onNewPassword={() => newPasswordHandler}
/>

修改为：

<AuthContent
    isLogin={isLogin}
    isPasscodeEntry={isPasscodeEntry}
    setIsPasscodeEntry={setIsPasscodeEntry}
    setIsNewPassword={setIsNewPassword}
    isNewPassword={isNewPassword}
    setIsForgot={setIsForgot}
    onNewPassword={newPasswordHandler}
/>

• 直接传递newPasswordHandler作为onNewPassword的值，无需额外包装箭头函数（newPasswordHandler本身就是接收{passcode}参数的可调用函数）。
• 修正state setter的传递方式，直接传入setter函数即可，无需包装箭头函数。

2. 在isForgot分支的AuthContent中补充onNewPassword传递 #

原代码：

<AuthContent
    isLogin={false}
    isForgot={isForgot}
    onForgot={forgotHandler}
    isPasscodeEntry={isPasscodeEntry}
    setIsPasscodeEntry={() => setPasscodeEntry()}
    setIsNewPassword={() => setNewPassword}
    isNewPassword={isNewPassword}
/>

修改为：

<AuthContent
    isLogin={false}
    isForgot={isForgot}
    onForgot={forgotHandler}
    isPasscodeEntry={isPasscodeEntry}
    setIsPasscodeEntry={setIsPasscodeEntry}
    setIsNewPassword={setIsNewPassword}
    isNewPassword={isNewPassword}
    onNewPassword={isPasscodeEntry ? newPasswordHandler : undefined}
/>

• 当isPasscodeEntry为true时，传入newPasswordHandler，确保AuthContent在验证码提交时能拿到可调用的函数。
• 修正setIsPasscodeEntry的传递方式，去掉多余的调用包装。

3. 完善newPasswordHandler的验证成功逻辑 #

原代码：

async function newPasswordHandler({ passcode }) {
    try {
        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);
    }
}

修改为：

async function newPasswordHandler({ passcode }) {
    try {
        const storedCode = await AsyncStorage.getItem('resetCode');
        if (storedCode === passcode) {
            // 验证码验证成功，切换到新密码设置页面
            setIsNewPassword(true);
        } else {
            console.error('Invalid resetCode');
        }
    } catch (error) {
        console.error('Error verifying passcode:', error);
    } finally {
        setIsLoading(false);
    }
}

• 在验证码匹配成功后，添加setIsNewPassword(true)，触发状态切换进入新密码设置页面。

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