使用 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 团队会一起更新它们。

如果您想安装 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。 `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

使用 jest 时可能会出现同样的错误。因此，为了修复错误，我必须更新 react-test-renderer 使其具有与 react 和 react-dom

相同的版本

yarn add -D react-test-renderer@next

或者

npm i react-test-renderer@next

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

Answer 3

现在 React 16.7（不包含钩子）已经发布，如果你输入 ^16.7.0-alpha.0 前导 ^ 可能会出错你的package.json。

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

Answer 4

我刚刚更新到最新版本的 React 和 React DOM，它对我有用。 Check React versions here

Answer 5

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

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

Answer 6

使用 React 和 {useState}:

import React,{useState} from 'react';

const Renu = () => {
    const[heart,heartSet]= useState('renu'); 
    return(
        <h1>vikas love {heart}</h1>
    )
}

export default Renu;

Answer 7

确保您正确使用挂钩。当您使用错误但错误描述不够时，它对我也有效。

 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 8

我也遇到了同样的错误。

我的错误是：我用过：

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

你应该使用：

import {useState} from 'react'

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

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

javascript

reactjs

react-hooks

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

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

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

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

javascript

reactjs

react-hooks

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

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

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

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