使用React Hooks时,TypeError dispatcher.useState不是函数

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钩子提议,但我收到一个错误:react@16.8.1package.json

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

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

1. 确保您还更新了react-dom软件包,其版本react与之相同.一般而言react,react-dom应该始终是相同的版本,package.json因为React团队将它们一起更新.

如果你想安装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",
    ...
  }
}

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

Answer 2

使用jest时可能会出现相同的错误.因此,为了修复错误,我必须更新react-test-renderer以获得与react和react-dom相同的版本

yarn add -D react-test-renderer@next

要么

npm i react-test-renderer@next

所有反应,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"

Answer 3

通过调用修复了我的React.useState(0)。

如果反应版本足够新，它只需要使用React.useState.

Answer 4

现在响应16.7(不包含钩子的那个)被释放,如果你输入你^16.7.0-alpha.0的前导^,你可能会收到一个错误package.json.

对于带钩子的版本,你必须省略^.