javascript - TypeError dispatcher.useState 在使用 React Hooks 时不是一个函数

Question

我有这个组件:

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;

因为我想尝试新的 React hooks建议通过在我的 package.json 中安装 react@16.8.1，但我收到一个错误:

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

我做错了什么？

Answer 1

可能有很多原因，大多数是由于版本不兼容或在 package.json 中使用了 ^:

1。确保 react 和 react-dom 的版本相同

确保您还更新了 react-dom 包，并且它与 react 的版本相同。一般来说，react 和 react-dom 在 package.json 中应该始终是相同的版本，因为 React 团队会一起更新它们。

如果您想安装 React 16.7.0-alpha.2，请检查您是否使用 ^，因为您将安装 16.7，它没有 Hook 。

示例 package.json:

{
  ...
  "dependencies": {
    "react": "16.8.4", // Make sure version is same as react-dom
    "react-dom": "16.8.4",
    ...
  }
}

---

2。 react-test-renderer 与 react 和 react-dom

版本相同

如果您使用的是 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",
    ...
  }
}