TypeError dispatcher.useState 不是使用 React Hooks 时的函数 [英] TypeError dispatcher.useState is not a function when using React Hooks

问题描述

我有这个组件:

import React, { useState, useEffect } from "react";从react-dom"导入 ReactDOM；功能应用(){const [count, setCount] = useState(0);useEffect(() => {document.title = `您点击了 ${count} 次`;});返回 (<div><p>您点击了 {count} 次</p><button onClick={() =>setCount(count + 1)}>点击我</button>

);}导出默认应用程序；

因为我想通过安装 来尝试新的 React hooks 提议react@16.8.1 在我的 package.json 中，但出现错误:

TypeError: dispatcher.useState 不是函数2 |从react-dom"导入 ReactDOM；3 |4 |功能应用(){>5 |const [count, setCount] = useState(0);|^6 |useEffect(() => {7 |document.title = `您点击了 ${count} 次`;8 |});

我做错了什么?

解决方案

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

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

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

如果你想安装 React 16.7.0-alpha.2，请检查你没有使用 ^ 因为你将安装 16.7，这没有钩子.

示例 package.json:

<代码>{...依赖关系":{"react": "16.8.4",//确保版本与 react-dom 相同"react-dom": "16.8.4",...}}

<小时>

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

的版本相同

如果您使用 Jest，请确保 react-test-renderer 与 react 和 react-dom 的版本相同:

示例 package.json:

<代码>{...依赖关系":{反应":16.8.4"，"react-dom": "16.8.4",反应测试渲染器":16.8.4"，...}}

I have this component:

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;

as I want to try out the new React hooks proposal by installing react@16.8.1 in my package.json, but I'm getting an error:

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

What did I do wrong?

解决方案

There could be many reasons, and most are due to version incompatibilites or using a ^ in package.json:

1. Ensure react and react-dom are of the same version

Ensure that you have also updated the react-dom package and it is of the same version as react. In general react and react-dom should always be the same version in package.json as the React team updates them together.

If you want to install React 16.7.0-alpha.2, check that you are not using the ^ as you will install 16.7 instead, which doesn't have hooks.

Example package.json:

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

---

2. react-test-renderer is of the same version as react and react-dom

If you are using Jest, ensure that react-test-renderer is of the same version as react and react-dom:

Example package.json:

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

这篇关于TypeError dispatcher.useState 不是使用 React Hooks 时的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！