react 报错 react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

这个错误通常发生在您在常规 JavaScript 函数或类组件中尝试使用 hooks 而不是函数组件时。解决此问题，请确保您使用的是函数组件，并且 React 和 React DOM 版本兼容。还可以检查是否遵循 Hooks 的规则，这包括在功能组件的顶层调用 Hooks，而不是在循环或条件中调用。如果这些解决方案都不起作用，可能可能是您的应用程序中有多个 React 版本，这可能会导致冲突和错误。尝试删除任何重复版本，并确保只加载一个版本。

相关问题

Invalid hook call. Hooks can only be called inside of the body of a function component.

Invalid hook call. Hooks can only be called inside of the body of a function component 是一个 React 错误信息。它表示你在一个非函数组件的地方调用了 React 的钩子函数。React 的钩子函数只能在函数组件的内部使用。

解决这个问题的方法是将你的组件改为一个函数组件，而不是类组件。你需要将你的组件的代码从类组件的形式改为函数组件的形式，并将钩子函数的调用放在函数组件的主体内部。

react 试用 useLocation 报错，Hooks can only be called inside of the body of a function component.

这个错误一般是因为在函数组件之外使用了Hooks。在你的代码中，可能是在函数组件之外使用了`useLocation`。你需要确保`useLocation`只在函数组件内调用。如果你需要在函数组件之外使用`useLocation`，你可以将它包装在另一个函数组件内，然后在这个函数组件中使用`useLocation`。