React类组件中使用带Hooks的函数子组件出现无效Hook调用报错如何解决？

使用了Hooks的函数式组件完全可以作为类组件的子组件正常使用，你遇到的"Invalid hook call. Hooks can only be called inside of the body of a function component."报错和父组件SearchProvider是类组件没有任何关联，你提供的示例代码写法本身是合规的，可从以下几个方向排查报错原因：

• 多版本React实例冲突：检查项目是否存在多份React/ReactDOM实例，比如你自己项目安装了一份React，你引入InputRange的react-components包又内置打包了独立的React依赖，会导致Hook调用时找不到正确的组件上下文。可以在项目根目录执行npm ls react或yarn list react验证是否存在多个版本的React。
• 组件调用方式错误：确认你在所有地方使用InputRange时都是以组件标签形式<InputRange />调用，而非直接作为普通函数执行InputRange()，后者不会被React识别为函数组件渲染流程，自然不允许Hook调用。
• React版本不满足要求：Hooks是React 16.8版本才新增的特性，检查你项目依赖的react、react-dom包版本是否低于16.8.0，低版本React无法识别Hook语法。
• Hook调用位置不符合规范：检查InputRange内部的useEffect以及其他自定义Hook是否写在了条件判断、循环语句、内部嵌套函数中，所有Hook必须在函数组件的最顶层调用。

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