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;

我想通过在react@16.8.1中安装package.json来尝试新的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造成的：

确保您还更新了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",
    ...
  }
}

如果使用的是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-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

现在释放了反应16.7（一个包含钩子的不），如果您在{{1}中键入^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 from 'react'
const Renu=()=>{
    const[heart,heartSet]=React.useState('renu'); 
    return(
    <h1>vikas love {heart}</h1>
     )
}
export default Renu;

Answer 7

确保正确导入了useState。

import React, {useState} from 'react';

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

7 个答案: