React将回调函数作为props传递时报cb is not a function错误如何解决

• 场景1：当你在其他页面使用CustomModal组件时，传入的handleSave函数没有定义第二个回调参数，或是未传递handleSave使用了默认空函数，导致父组件执行cb()时该参数不存在
• 场景2：如果模态框内部嵌套了form表单，按下回车触发默认表单提交行为时，会直接调用handleSave仅传递事件对象e，没有传递第二个回调参数，导致cb为undefined
• 场景3：未对回调参数做类型校验，不管cb是否为函数就直接调用，一旦参数异常就会抛出类型错误

1. 基础修复（兼容现有回调写法） #

先修改CustomModal组件的保存触发逻辑，增加事件拦截和参数校验：

const localHandleSave = (e) => {
    // 阻止默认事件，避免表单默认提交触发异常调用
    e.preventDefault();
    // 先判断handleSave是否为函数再执行
    if (typeof handleSave === 'function') {
        handleSave(e, (err) => {
            console.log('i am called back');
            handleClose();
        });
    }
};
// 增加兜底默认props，避免未传handleSave时报错
CustomModal.defaultProps = {
    handleSave: (e, cb) => {
        if (typeof cb === 'function') cb(new Error('未定义保存逻辑'));
    }
};

再修改父组件的提交逻辑，增加回调校验：

const onSubmit = (e, cb) => {
    // 接口请求成功后执行回调
    if (typeof cb === 'function') {
        cb(null);
    }
};

2. 优化方案（用Promise替代回调，更符合React异步逻辑） #

回调写法容易出现参数传递异常，改用Promise写法更简洁易维护：
修改CustomModal的保存逻辑：

const localHandleSave = async (e) => {
    e.preventDefault();
    if (typeof handleSave !== 'function') return
    try {
        // 等待提交逻辑执行完成
        await handleSave(e)
        // 提交成功直接关闭模态框
        handleClose()
    } catch (err) {
        console.error('提交失败：', err)
    }
};

修改父组件的提交逻辑，返回Promise即可：

const onSubmit = async (e) => {
    // 直接写你的异步提交逻辑，比如调用接口
    await fetch('/api/xxx', {
        method: 'POST',
        body: JSON.stringify(你的提交参数)
    })
    // 成功自动resolve，失败抛出错误即可，不需要手动传递回调
};

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