Reactjs报错Uncaught TypeError: callback is not a function解决求助

错误原因 #

报错核心是代码执行到callback(event)时，callback不是可执行的函数类型，常见触发场景如下：

• 调用按键绑定方法时传入的close本身不是函数：可能是close变量拼写错误、作用域内未定义、或者误写为close()把函数执行后的返回值传入了。
• 调用按键绑定时未传callback参数：比如写为onKeyDown={onSpaceOrEnter()}，此时callback为undefined，触发按键时调用就会抛出类型错误。

修复方案 #

1. 封装层加校验兜底 #

先给按键逻辑加参数校验，避免参数异常时直接抛出错误，修改封装代码如下：

const KEY = {
  enter: 13,
  escape: 27,
  space: 32
};

const on = (...keys) => callback => event => {
  if (keys.indexOf(event.keyCode) !== -1) {
    event.preventDefault();
    // 仅当callback是函数时才执行，兜底处理异常场景
    typeof callback === 'function' && callback(event);
  }
};

export const onEnter = on(KEY.enter);
export const onEscape = on(KEY.escape);
export const onSpaceOrEnter = on(KEY.space, KEY.enter);

2. 调用侧逻辑检查 #

• 确认当前作用域内close是正常定义的可执行函数，检查变量名拼写是否正确。
• 确认调用时传入的是函数本身，而非函数执行结果：
  错误写法：onKeyDown={onSpaceOrEnter(close())}
  正确写法：onKeyDown={onSpaceOrEnter(close)}
• 如果需要给close传自定义参数，可用箭头函数包裹：
  示例：onKeyDown={onSpaceOrEnter((e) => close(e, '自定义参数'))}

可选优化 #

event.keyCode已被Web标准废弃，可替换为event.key做判断，兼容性更好：

const on = (...keys) => callback => event => {
  if (keys.includes(event.key)) {
    event.preventDefault();
    typeof callback === 'function' && callback(event);
  }
};

// 对应导出的绑定方法调整参数：
export const onEnter = on('Enter');
export const onEscape = on('Escape');
export const onSpaceOrEnter = on(' ', 'Enter');

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