React Hooks Error: хуки могут быть вызваны только внутри тела компонента функции

Question

Я получаю эту ошибку при использовании хука useState.У меня есть это в его основной форме, глядя на реагировать документы для справки, но я все еще получаю эту ошибку.Я готов к моменту лицо ладонью ...

export function Header() {
  const [count, setCount] = useState(0)
  return <span>header</span>
}

Answer 1

Для меня это происходило потому, что у меня была новая версия реакции (16.8.6) и старая версия реагирования (16.6.1).

https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom

Обновление до @latest (16.8.6) исправило ошибку.

Answer 2

Для тех, кто сталкивался с этой проблемой при использовании MobX и переносе компонента на observer, убедитесь, что вы используете mobx-react-lite вместо mobx-react.

Answer 3

Просто для уточнения ответа @ rista404, включая дубликаты версий из react (и, возможно, react-dom), вы получите ту же ошибку в зависимости от того, где вы используете свои хуки.Вот два примера ...

1. Внешняя зависимость включает другую версию react в свой dependencies, вероятно, по ошибке, поскольку react обычно должна быть зависимостью от равноправного узла.Если npm автоматически не дедуплирует эту версию с вашей локальной версией, вы можете увидеть эту ошибку.Это то, на что ссылался @ rista404.
2. Вы npm link пакет, включающий react в devDependencies или dependencies.Теперь для модулей в этом пакете вы можете увидеть ошибки, если они извлекают другую версию react из своего локального каталога node_modules, а не из родительского проекта.

Последний можно исправитьпри связывании с webpack с использованием resolve.alias, например, так ...

    resolve: {
        alias: {
            'react': path.resolve(__dirname, 'node_modules/react'),
            'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
        }
    }

Это обеспечит постоянное извлечение react из каталога node_modules родительского проекта.

Answer 4

Моя проблема заключалась в следующем:

Я делал: ReactDOM.render(Example(), app);

В то время как я должен был делать: ReactDOM.render(<Example />, app);

Answer 5

Была такая же проблема.Моя проблема была связана с React Router.Я случайно использовал

<Route render={ComponentUsingHooks} />

вместо

<Route component={ComponentUsingHooks} />

Answer 6

update package.json версия response-dom, как реагирует

Answer 7

Если вы используете приложение Create React, вам нужно обновить "react-scripts" версию также с версиями реагирования и реагирования.

 "react-scripts": "2.1.5",
 "react": "^16.8.1",
 "react-dom": "^16.8.1",

эта комбинация отлично работает.

Answer 8

нашел этот обходной путь для react-hot-loader, пока этот PR исправляет его входящий.

Оберните функцию, которая вызывает перехватчики в React.memo, предотвращая горячую перезагрузку, если она не изменилась.

const MyFunc = React.memo(({props}) => {...

Кредит на решение: https://github.com/gatsbyjs/gatsby/issues/9489

Answer 9

У меня была проблема в monorepo, где пакет docz использовал react@16.6.3, а окончательный выходной пакет имел две версии реакции.

Проблема на Github

Исправлено, удалив пакет 101

Answer 10

Я столкнулся с этой ошибкой при использовании Замена горячего модуля пакета и исправлен путем обновления react-dom до его альфа-версии:

yarn add react-dom@16.7.0-alpha.0

См. Эту проблему.