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

TypeError dispatcher.useState is not a function when using React Hooks

提问by Yangshun Tay

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 hooksproposal by installing [email protected]in my package.json, but I'm getting an error:

因为我想尝试新的阵营钩通过安装建议[email protected]我package.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 |   });

What did I do wrong?

我做错了什么？

回答by Yangshun Tay

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

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

1. Ensure reactand react-domare of the same version

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

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

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

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.

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

Example package.json:

示例package.json：

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

---

---

2. react-test-rendereris of the same version as reactand react-dom

2.react-test-renderer与react和版本相同react-dom

If you are using Jest, ensure that react-test-rendereris of the same version as reactand react-dom:

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

Example package.json:

示例package.json：

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

回答by Hemadri Dasari

You may get same error when using jest. So to fix the error I had to update react-test-renderer to have the same version as react and react-dom

使用 jest 时可能会遇到相同的错误。因此，为了修复错误，我必须更新 react-test-renderer 以使其具有与 react 和 react-dom 相同的版本

yarn add -D react-test-renderer@next

Or

或者

npm i react-test-renderer@next

All react, react-dom and react-test-renderer should contain same version

所有 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"

回答by Tomas Dohnal

Now that react 16.7 (the one notcontaining hooks) is released you might get an error if you type ^16.7.0-alpha.0with the leading ^in your package.json.

现在，反应16.7（一个不包含钩）被释放，如果你键入你可能会得到一个错误，^16.7.0-alpha.0与领先的^在你的package.json。

For the version with hooks you have to omit the ^.

对于带有钩子的版本，您必须省略^.

回答by caot

Fixed mine by calling React.useState(0).

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

If a react version is new enough, it just has to use React.useState.

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

回答by Anny Gutierrez

I just updated to the latest version of react and react DOM, it works for me. Check React versions here

我刚刚更新到最新版本的 react 和 react DOM，它对我有用。 在此处检查 React 版本

回答by vikas benvanshi

only use React. before useState

只使用反应。使用前状态

import React from 'react'
const Renu=()=>{
    const[heart,heartSet]=React.useState('renu'); 
    return(
    <h1>vikas love {heart}</h1>
     )
}
export default Renu;