Question

当我试图向子组件添加挂钩以使功能可在多个父组件之间重用时，我不断遇到此Invalid hook call. Hooks can only be called inside of the body of a function component.错误。

此React应用是通过create-react-app按照常规方式创建的。

我已阅读https://reactjs.org/warnings/invalid-hook-call-warning.html，https://github.com/facebook/react/issues/13991和其他stackoverflow答案，但没有找到解决方案。 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.您可能违反了《钩子规则》 3.您可能在同一应用程序中拥有多个React副本” 在设置常量时--at AdvancedSearch.jsx。

Answer 1

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

Answer 2

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

它只是一个常规功能。正如react所建议的那样，“挂钩只能在功能组件的主体内部调用”

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

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

2 个答案: