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

Pour ceux qui rencontrent ce problème lors de l'utilisation de MobX et de l'enveloppement d'un composant avec un observer assurez-vous d'utiliser mobx-react-lite au lieu de mobx-react .

MISE À JOUR DU 29 MAI

De mobx-react 6.0.0 à l'avenir, les composants basés sur des crochets sont désormais pris en charge par mobx-react Il n'y a donc pas besoin de mobx-react-lite plus d'utilisation (si c'était votre problème).

Answer 2

J'ai trouvé cette solution de contournement pour react-hot-loader tandis que le PR pour le réparer est entrant.

Enveloppez la fonction qui appelle les crochets dans un fichier React.memo empêchant ainsi un rechargement à chaud s'il est inchangé.

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

Crédit pour la solution : https://github.com/gatsbyjs/gatsby/issues/9489

Answer 3

Pour les autres utilisateurs d'espaces de travail en fil, voici ma situation et comment je l'ai résolue.

• paquets
  • foo
    • react@16.8.6
  • bar
    • react@16.10.1

Les documents de Facebook sur Avertissement d'appel crochet non valide ne disent rien à propos des espaces de travail de yarn, donc j'ai supposé que ma configuration était correcte. Mais ce n'était pas le cas. Vous pouvez corriger l'erreur seulement en utilisant la même version à travers tous vos paquets .

Dans l'exemple ci-dessus, vous devez faire passer la version de react de "foo" à 16.10.1, afin qu'elle corresponde à la version de react de "bar".

Bonus : voir cette discussion sur GitHub pour une belle collection de bagages émotionnels déchargés sur Internet.

Answer 4

Dans mon cas, j'appelais useSelector dans useEffect ! !!

Answer 5

Si vous utilisez Create React App, vous devez mettre à jour "react-scripts" également avec la version de react et react-dom.

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

cette combinaison fonctionne bien.