无效钩子调用错误:只能在函数组件主体内部调用钩子

Question

当我尝试向子组件添加钩子以使函数可在多个父组件中重用时，我不断收到这个Invalid hook call. Hooks can only be called inside of the body of a function component.错误。

这个反应应用程序是通过create-react-app以通常的方式创建的。

我已经通读了 https://reactjs.org/warnings/invalid-hook-call-warning.html、https://github.com/facebook/react/issues/13991 和其他堆栈溢出答案，但没有找到解决方案。未捕获的错误：钩子只能在函数组件的主体内调用，这与函数组件类似，但我使用的是有效版本。

我尝试键入npm ls react以查看是否正在运行两个版本，但只有一个版本显示：-- react@16.8.6

//Package.json

"react": "^16.8.6",
"react-dom": "^16.8.6",

//AdvancedSearch.jsx-- 子组件

export function HandleSearchFilterChange(props, e) {
const setAdvancedSearchFilter = useState( props.advancedSearchFilter )[1]; //error triggered here
useEffect(
setAdvancedSearchFilter(
e
)
);  
}

//ETablesAndSearch.js-- 父组件

import { HandleSearchFilterChange} from '../Components/AdvancedSearch.jsx';
class ETablesAndSearch extends React.Component {
render() {
return(
<AdvancedSearch onSearchFilterChange={HandleSearchFilterChange}/>
)
}  

错误消息：">无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 和渲染器版本(比如 React DOM) 2.你可能违反了钩子的规则 3. 您可能在同一应用程序中有多个 React 副本" --在 AdvancedSearch.jsx 设置常量时。

Answer 1

您可以简单地将类 ETablesAndSearch替换为功能组件。这将解决您的问题。

Answer 2

您的"HandleSearchFilterChange"不是功能组件。

它只是一个常规功能。正如 react 所建议的那样"钩子只能在函数组件的主体内部调用">

应该有一些 html 元素来使其成为功能组件。