解决React hook 'useState' cannot be called in a class component报错

 更新时间:2022年12月02日 10:03:17   作者:Borislav Hadzhiev  
这篇文章主要为大家介绍了React hook 'useState' cannot be called in a class component报错解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

总览

当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class component"错误。为了解决该错误,请将类组件转换为函数组件。因为钩子不能在类组件中使用。

这里有个例子用来展示错误是如何发生的。

// App.js
import {useState, useEffect} from 'react';
class Example {
  render() {
    // ⛔️ React Hook "useState" cannot be called in a class component.
    // React Hooks must be called in a React function component or a custom React Hook function.
    const [count, setCount] = useState(0);
    // ⛔️ React Hook "useEffect" cannot be called in a class component.
    // React Hooks must be called in a React function component or a custom React Hook function.
    useEffect(() => {
      console.log('hello world');
    }, []);
    return (
      <div>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  }
}

导致这个错误的原因是,钩子只能在函数组件或自定义钩子中使用,而我们正试图在一个类中使用钩子。

函数组件

解决该错误的一种方法是,将类组件转换为函数组件。

// App.js
import {useState, useEffect} from 'react';
export default function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('hello world');
  }, []);
  return (
    <div>
      <h2>Count {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

就像文档中所说的那样:

  • 只从React函数组件或自定义钩子中调用Hook
  • 只在最顶层使用 Hook
  • 不要在循环,条件或嵌套函数中调用 Hook
  • 确保总是在你的 React 函数的最顶层以及任何 return 之前使用 Hook

类组件中使用setState()

另外,我们可以使用一个类组件,用setState()方法更新状态。

// App.js
import React from 'react';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  render() {
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <button onClick={() => this.setState({count: this.state.count + 1})}>
          Increment
        </button>
      </div>
    );
  }
}

请注意,在较新的代码库中,函数组件比类更常被使用。

它们也更方便,因为我们不必考虑this关键字,并使我们能够使用内置和自定义钩子。

翻译原文链接:bobbyhadz.com/blog/react-…

以上就是解决React hook 'useState' cannot be called in a class component报错的详细内容,更多关于React报错useState component的资料请关注脚本之家其它相关文章!

相关文章

  • React组件useReducer的讲解与使用

    React组件useReducer的讲解与使用

    在React函数式组件中,我们可以通过useState()来创建state,这种state创建方式会给我们返回两个东西state和setState()。
    2023-04-04
  • 使用React实现一个简单的待办任务列表

    使用React实现一个简单的待办任务列表

    这篇文章主要给大家介绍了使用React和Ant Design库构建的待办任务列表应用,它包含了可编辑的表格,用户可以添加、编辑和完成任务,以及保存任务列表数据到本地存储,文中有相关的代码示例,需要的朋友可以参考下
    2023-08-08
  • React实现类似淘宝tab居中切换效果的示例代码

    React实现类似淘宝tab居中切换效果的示例代码

    这篇文章主要介绍了React实现类似淘宝tab居中切换效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • react中如何使用定义数据并监听其值

    react中如何使用定义数据并监听其值

    这篇文章主要介绍了react中如何使用定义数据并监听其值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React优雅的封装SvgIcon组件示例

    React优雅的封装SvgIcon组件示例

    这篇文章主要为大家介绍了React优雅的封装SvgIcon组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • react-three/postprocessing库的参数中文含义使用解析

    react-three/postprocessing库的参数中文含义使用解析

    这篇文章主要介绍了react-three/postprocessing库的参数中文含义使用总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • react18中react-redux状态管理的实现

    react18中react-redux状态管理的实现

    本文主要介绍了react18中react-redux状态管理的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • React Native如何消除启动时白屏的方法

    React Native如何消除启动时白屏的方法

    本篇文章主要介绍了React Native如何消除启动时白屏的方法,详细的介绍了解决的方法,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • 详解React 元素渲染

    详解React 元素渲染

    这篇文章主要介绍了React 元素渲染的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • React Native react-navigation 导航使用详解

    React Native react-navigation 导航使用详解

    本篇文章主要介绍了React Native react-navigation 导航使用详解,详解的介绍了react-navigation导航的使用,具有一定的参考价值,有兴趣的可以了解一下
    2017-12-12

最新评论