使用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;

因为我想通过在我的package.json中安装react@16.8.1来尝试新的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 |   });

我做错了什么？

Answer 1

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

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

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

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

Answer 2

通过调用React.useState(0)修复了地雷。

如果react版本足够新，那么它只需要使用React.useState。

Answer 3

使用jest时可能会出现同样的错误。因此，为了修复这个错误，我不得不更新react测试渲染器，使其具有与react和react dom 相同的版本

yarn add -D react-test-renderer@next

或

npm i react-test-renderer@next

所有react、react dom和react测试渲染器都应包含相同版本的

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

Answer 4

现在react 16.7(一个不包含钩子的(已经发布，如果您在package.json中键入带有前导^的^16.7.0-alpha.0，则可能会出现错误。

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

Answer 5

确保正确使用钩子。当你用错了它，但错误描述还不够时，它也适用于我。

import React,{useState} from 'react';
const ComponentName= () => {
const[stateOne, setStateOne]= useState(initial); // right usage - []
const{stateTwo, setStateTwo}= useState(initial); // wrong usage - {}

useEffect(() => {
setStateOne(value1);
setStateTwo(value2);
}, []);
}
export default ComponentName;

Answer 6

我刚刚更新到最新版本的react and react DOM，它对我很有用。点击此处查看React版本

Answer 7

我也出现了同样的错误。

我的错误是：我用过：

import {useState} from 'react/cjs/react.development'

您应该使用：

import {useState} from 'react'

Answer 8

如果yangsun-tay不满足您的情况，并且您正在使用子模块或子模块，只需使用npm dedupe即可。此命令将查找现有的package.json，从父到子开始，并将所有重复的模块合并到与父package.json相同级别的根node_modules目录中。

这是npm重复数据消除的参考

Answer 9

使用React和{useState}:

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