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

xxb16uws  于 2023-04-05  发布在  React
关注(0)|答案(9)|浏览(145)

我有这个组件:

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

我做错了什么?

ippsafx7

ippsafx71#

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

1.确保reactreact-dom版本相同

确保您也更新了react-dom包,并且它**与react**的版本相同。通常情况下,reactreact-dompackage.json中应该始终是相同的版本,因为React团队会一起更新它们。

**如果你想安装React 16.7.0-alpha.2,请检查你没有使用^,因为你将安装16.7,它没有hooks。

示例package.json

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

2. react-test-rendererreactreact-dom版本相同

如果您使用Jest,请确保react-test-rendererreactreact-dom的版本相同:
示例package.json

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

de90aj5v2#

使用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"
rxztt3cl

rxztt3cl3#

通过调用React.useState(0)修复了我的问题。
如果react版本足够新,它只需要使用React.useState

nhjlsmyf

nhjlsmyf4#

现在react 16.7(不包含钩子的版本)已经发布了,如果你在package.json中输入^16.7.0-alpha.0,前面是^,你可能会得到一个错误。
对于有钩子的版本,你必须省略^

mv1qrgav

mv1qrgav5#

确保你正在正确地使用钩子。当你使用错误但错误描述不够时,它也对我有效。

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;
prdp8dxp

prdp8dxp6#

我刚刚更新到最新版本的react和react DOM,它对我很有效。Check React versions here

vuktfyat

vuktfyat7#

同样的错误发生在我身上。
我的错误是:我使用了:

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

您应该用途:

import {useState} from 'react'
9q78igpj

9q78igpj8#

如果yangshun-tay不能满足你情况,而你正在使用子模块或子模块,只需要使用npm dedupe这个命令将查找现有的package.json从你的父到子到leap子,合并所有重复的模块,并将其放入根node_modules与你的父package.json相同级别的目录。
下面是npm-dedupe的参考

9lowa7mx

9lowa7mx9#

使用React和{useState}

import React,{useState} from 'react';

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

export default Renu;

相关问题