web-dev-qa-db-fra.com

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

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;

comme je veux essayer la nouvelle proposition React hooks en installant [email protected] dans mon package.json, mais je reçois 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?

javascriptreactjsreact-hooks
46
Yangshun Tay

Il peut y avoir plusieurs raisons, dont la plupart sont dues à des incompatibilités de version ou à l'utilisation d'un ^ dans package.json:

  1. Assurez-vous que vous avez également mis à jour le package react-dom et qu'il est de la même version que react. En général, react et react-dom doivent toujours avoir la même version dans package.json, car l'équipe React les met à jour ensemble.

Si vous voulez installer React 16.7.0-alpha.2, vérifiez que vous n'utilisez pas le ^ car vous allez installer 16.7 à la place, sans crochets. =

Exemple package.json:

{
  ...
  "dependencies": {
    "react": "16.8.4", // Make sure version is same as react-dom
    "react-dom": "16.8.4",
    ...
  }
}
  1. Si vous utilisez Jest, assurez-vous que react-test-renderer a la même version que react et react-dom:

Exemple package.json:

{
  ...
  "dependencies": {
    "react": "16.8.4",
    "react-dom": "16.8.4",
    "react-test-renderer": "16.8.4",
    ...
  }
}
97
Yangshun Tay

Vous pouvez obtenir la même erreur lorsque vous utilisez plaisanterie. Donc, pour corriger l'erreur, j'ai dû mettre à jour react-test-renderer pour avoir la même version que react et rea-dom

   yarn add -D react-test-renderer@next

Ou

     npm i react-test-renderer@next

Tous les react, réact-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"
8
Hemadri Dasari

Maintenant que la réaction 16.7 (celle pas contenant les hooks) est publiée, une erreur risque de se produire si vous tapez ^16.7.0-alpha.0 avec le ^ en tête dans votre package.json.

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

6
Tomas Dohnal

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

0
Anny Gutierrez

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

Si une version de réaction est suffisamment nouvelle, il ne reste plus qu’à utiliser React.useState.

0
caot