使用React.lazy导入ReactDatePicker时单个组件出现TypeError: i2.props.onFocus is not a function问题排查

嘿，我来帮你捋捋这个问题！你说用同样的React.lazy导入方式，两个组件用ReactDatePicker，一个报错一个正常，手动加个空的onFocus就解决了，这种情况大概率是以下几个原因：

• 两个组件的DatePicker配置有隐藏差异：你贴的代码里能看到showIcon，我猜报错的组件开启了类似showIcon这类需要触发焦点事件的属性——当开启这些属性时，组件内部会尝试调用onFocus这个props，如果没传的话，undefined自然不是函数就报错了；而另一个组件可能没开这些属性，所以不会触发这个逻辑，也就没报错。

• 父组件传递的props不一致：虽然你觉得代码一样，但报错的那个组件的父组件，可能在某些场景下把onFocus传成了undefined或者非函数类型。比如父组件里有条件渲染，某个状态没就绪时，onFocus还没赋值就传给了子组件，而另一个组件的父组件始终能正确传递onFocus（或者根本没触发需要onFocus的场景）。

• 异步加载的渲染时机问题：用React.lazy异步加载组件时，如果报错的组件是在挂载初期就立刻渲染DatePicker，而此时父组件的onFocus props还没准备好（比如从API请求的状态还没回来），就会触发这个错误；另一个组件可能是在状态就绪后才渲染DatePicker，所以没碰到这个问题。

解决起来也很简单：

• 最直接的就是像你已经做的那样，在使用DatePicker时手动传入onFocus={()=>{}}，给个空函数兜底。
• 也可以给ReactDatePicker设置默认props，一劳永逸：

ReactDatePicker.defaultProps = {
  onFocus: () => {}
};

• 检查两个组件的DatePicker配置，把差异点找出来，比如是否开启了showIcon这类属性，统一处理这些需要依赖onFocus的配置项。

备注：内容来源于stack exchange，提问作者Jamshaid Tariq