web-dev-qa-db-ja.com

TypeError dispatcher.useStateは、Reactフックを使用する場合の関数ではありません

私はこのコンポーネントを持っています：

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;

[email protected]にpackage.jsonをインストールして新しい React hooks 提案を試してみたいのですが、エラーが発生します：

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 |   });

私は何を間違えましたか？

javascriptreactjsreact-hooks
46
Yangshun Tay

多くの理由が考えられますが、ほとんどはバージョンの非互換性または^でのpackage.jsonの使用が原因です。

  1. react-domパッケージも更新したことを確認してください。パッケージはreactと同じバージョンです。一般に、Reactチームが一緒に更新するとき、reactおよびreact-domは常にpackage.jsonの同じバージョンである必要があります。

React 16.7.0-alpha.2をインストールする場合は、代わりに16.7をインストールするため、^を使用していないことを確認してください。フックはありません。

例package.json：

{
  ...
  "dependencies": {
    "react": "16.8.4", // Make sure version is same as react-dom
    "react-dom": "16.8.4",
    ...
  }
}
  1. Jestを使用している場合、react-test-rendererがreactおよびreact-domと同じバージョンであることを確認してください。

例package.json：

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

Jestを使用すると、同じエラーが発生する場合があります。したがって、エラーを修正するには、react-test-rendererをreactおよびreact-domと同じバージョンに更新する必要がありました

   yarn add -D react-test-renderer@next

または

     npm i react-test-renderer@next

すべてのreact、react-dom、react-test-rendererには同じバージョンが含まれている必要があります

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

反応16.7（フックを含むnot）がリリースされたので、^16.7.0-alpha.0の先頭に^を付けてpackage.jsonと入力すると、エラーが発生する可能性があります。

フック付きのバージョンでは、^を省略する必要があります。

6
Tomas Dohnal

反応して反応するDOMの最新バージョンに更新しました、それは私のために動作します。 ここでReactバージョンを確認してください

0
Anny Gutierrez

React.useState(0)を呼び出して修正しました。

反応バージョンが十分に新しい場合は、React.useStateを使用するだけです。

0
caot