React Native传递字符串至函数时出现undefined的原因排查

我是JS和React Native新手，在点击组件传递用户登录信息到另一个文件的函数时遇到问题，目标函数里拿到的参数全是undefined。

相关代码 #

loginButton.js #

// 提交按钮点击时触发的函数
async function submitInfo(name, id, grade, email, password, { navigation }) {
    await accountChecks(name, email, password).then(() => {       
        // 后续操作
    }).catch((error) => {
        Alert.alert(error);   
    });
}

// 提交按钮组件
function InfoSubmit( { name, id, grade, email, password, navigation} ) {
    return (
        <Pressable style={styles.submitButton} onPress={() => submitInfo(name, id, grade, email, password, {navigation})}>
            <Text style={styles.submitButtonText}>
                submit
            </Text>
        </Pressable>
    );
}

accountChecks 所在文件 #

function accountChecks(name, email, password) {
    // 打印数据及类型
    console.log(name, email, password);
    console.log(typeof(name), typeof(email), typeof(password));

    // 账号校验逻辑
}

export default accountChecks();

问题现象 #

调用accountChecks后，控制台输出：

LOG  undefined undefined undefined
LOG  undefined undefined undefined

我在论坛找过解决方案但没找到匹配的，求帮忙。

解决方案 #

问题核心出在accountChecks的导出语句上：

• 你写的export default accountChecks();是立即调用函数并导出它的返回值，而非导出函数本身。这会导致accountChecks在模块加载时就被无参数执行一次（所以输出undefined），后续submitInfo里调用的其实是这个函数的返回值（undefined），自然无法正确传参。

修正方法：把导出语句改成导出函数引用：

export default accountChecks;

另外补充一个优化点：submitInfo里同时使用await和.then()属于冗余写法，可以二选一，比如改成更简洁的try/catch形式：

async function submitInfo(name, id, grade, email, password, { navigation }) {
    try {
        await accountChecks(name, email, password);
        // 后续操作
    } catch (error) {
        Alert.alert(error);   
    }
}

修改后参数就能正常传递到accountChecks中了。

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