时间戳

首页 > 解决方案 > 无效的钩子调用错误：只能在函数组件的主体内部调用钩子

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

问题描述

当我尝试向子组件添加挂钩以使函数可跨多个父组件重用时，我不断收到此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和其他 stackoverflow 答案，但没有找到一个解法。未捕获的错误：只能在函数组件的主体内部调用挂钩，但我使用的是有效版本。

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

//包.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 副本”——在 AdvancedSearch.jsx 设置常量时。

标签： javascriptreactjs

解决方案

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

推荐阅读