React Hooks Erreur : Les crochets ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction.

Question

J'obtiens cette erreur lorsque j'utilise le useState crochet. Je l'ai dans sa forme de base, en regardant le docs sur les réacteurs pour une référence, mais je reçois toujours cette erreur. Je suis prêt pour le moment de la paume de la main...

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

Answer 1

Juste pour développer la réponse de @rista404, y compris versions dupliquées de react (et peut-être react-dom ) produira la même erreur selon l'endroit où vous utilisez vos crochets. Voici deux exemples...

1. Une dépendance externe comprend une autre version de react dans son dependencies probablement par erreur, car react devrait normalement être une dépendance des pairs. Si npm ne dédouble pas automatiquement cette version avec votre version locale, vous pouvez voir cette erreur. C'est ce à quoi @rista404 faisait référence.
2. Vous npm link un paquet qui comprend react dans son devDependencies ou dependencies . Maintenant, pour les modules de ce paquetage, vous pouvez voir des erreurs s'ils tirent une version différente de react de leur local node_modules plutôt que celui du projet parent.

Ce dernier point peut être corrigé lors du regroupement avec webpack en utilisant resolve.alias comme ça...

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

Cela permettra de garantir react est toujours tirée de la base de données du projet parent node_modules répertoire.

Answer 2

Une autre solution si vous rencontrez ce problème en utilisant le lien npm :

Vous pouvez npm link dans votre bibliothèque comme expliqué ici : https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

ou définissez react dans votre bibliothèque comme peerDependency et utilisez ensuite npm link --only=production

Answer 3

J'ai rencontré cette erreur en utilisant Remplacement du module chaud de Parcel et corrigé par la mise à jour react-dom à sa version alpha :

yarn add react-dom@16.7.0-alpha.0

Voir ce numéro.

Answer 4

Le problème pour moi était en effet react-hot-loader .

Vous pouvez désactiver react-hot-loader pour un seul composant au lieu que l'ensemble de l'application utilise le cold méthode comme ceci :

import { cold } from 'react-hot-loader'

export const YourComponent = cold(() => {

  // ... hook code

  return (
    // ...
  )
})

OU

export default cold(YourComponent)

Answer 5

Mon problème était le suivant :

Je faisais : ReactDOM.render(Example(), app);

Alors que j'aurais dû le faire : ReactDOM.render(<Example />, app);