TypeError dispatcher.useState n'est pas une fonction lors de l'utilisation de React Hooks

Question

J'ai ce composant:

 import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default App;

car je veux essayer la nouvelle proposition de hooks React react@16.8.1 dans mon package.json , mais j'obtiens une erreur:

 TypeError: dispatcher.useState is not a function

  2 | import ReactDOM from "react-dom";
  3 | 
  4 | function App() {
> 5 |   const [count, setCount] = useState(0);
    |                                     ^
  6 |   useEffect(() => {
  7 |     document.title = `You clicked ${count} times`;
  8 |   });

Qu'ai-je fait de mal?

Answer 1

Vous pouvez obtenir la même erreur lors de l'utilisation de jest. Donc, pour corriger l'erreur, j'ai dû mettre à jour react-test-renderer pour avoir la même version que react et react-dom

 yarn add -D react-test-renderer@next

Ou alors

 npm i react-test-renderer@next

Tous les moteurs de rendu react, react-dom et react-test-renderer doivent contenir la même version

 "react": "^16.7.0-alpha.0",
"react-dom": "^16.7.0-alpha.0",
"react-test-renderer": "^16.7.0-alpha.0"

Answer 2

Correction du mien en appelant React.useState(0) .

Si une version de réaction est suffisamment récente, il suffit d'utiliser React.useState .

Answer 3

Maintenant que react 16.7 (celui qui ne contient pas de hooks) est libéré, vous risquez d'obtenir une erreur si vous tapez ^16.7.0-alpha.0 avec le ^ en tête dans votre package.json .

Pour la version avec hooks, vous devez omettre le ^ .

Answer 4

Je viens de mettre à jour la dernière version de react and react DOM, cela fonctionne pour moi. Vérifiez les versions de React ici