未捕获的错误：只能在函数组件的主体内调用挂钩答案

【问题标题】：Uncaught Error: Hooks can only be called inside the body of a function component未捕获的错误：只能在函数组件的主体内调用挂钩
【发布时间】：2019-07-01 23:25:50
【问题描述】：

我正在尝试在我的项目中使用新的 react 功能挂钩。我已将反应版本更新为 16.8.1 但是，它给出了错误

未捕获的错误： Hooks 只能在 a 的主体内调用功能组件

package.json

"react": "^16.8.1",
"react-app-polyfill": "^0.2.0",
"react-dev-utils": "^7.0.1",
"react-dom": "^16.7.0",

index.js

function selectDoc() {
  const [selectedOrg, handleOrgChange] = useState("");
  return (
    <div className="select-info">
      <div className="select-showcase">
        <div style={{ marginRight: '20px' }}>
          <div>With Search</div>
          <Select           
            items={orgsList}
            selectedItem={selectedOrg}
            handleItemChange={handleOrgChange}
          />
        </div>
      </div>
    </div>
  );
}

export default selectDoc;

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

您的代码似乎是正确的。但是，您还没有将react-dom 更新到与React 相同的版本，即16.8.1，因此您会看到这个错误，起初有点误导。 react 和 react-dom 都应该使用相同的版本才能正确使用 React 功能。

运行

yarn upgrade react-dom@16.8.1

将react-dom升级为v16.8.1

如果你使用npm 而不是纱线，你可以运行

npm update --save react-dom@16.8.1

【讨论】：

我也面临这个错误 - stackoverflow.com/questions/59245466/…

【解决方案2】：

在我的例子中，问题实际上不在于组件本身，而在于 Route。

改为：

<Route path="/login" exact render={MyLoginComponent} />

应该是

<Route path="/login" exact render={(props) => <MyLoginComponent {...props} />} />

从“渲染”切换到“组件”也可以。

【讨论】：