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

Posted 2023-03-10

【中文标题】无效的钩子调用错误：只能在函数组件的主体内部调用钩子

【英文标题】：Invalid hook call error: Hooks can only be called inside of the body of a function component

【发布时间】：2019-11-21 13:36:26

【问题描述】：

当我尝试向子组件添加挂钩以使函数可跨多个父组件重用时，我不断收到此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 和其他 *** 答案，但没有找到解决方案。 Uncaught Error: Hooks can only be called inside the body of a function component 类似，但我使用的是有效版本。

我尝试输入 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. 你可能违反了 Hooks 规则 3. 你可能在同一个应用程序中拥有多个 React 副本” --at AdvancedSearch.jsx 设置常量时。

【问题讨论】：

正如错误试图告诉你的那样，你试图做的事情毫无意义。钩子只能应用于渲染。您是否阅读了第一个链接的“不支持”部分？

【参考方案1】：

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

【参考方案2】：

您的“HandleSearchFilterChange”不是功能组件。

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

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