React报错之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
关键字,并使我们能够使用内置和自定义钩子。
React报错之React hook 'useState' cannot be called in a class component的更多相关文章
- React报错之React hook 'useState' is called conditionally
正文从这开始~ 总览 当我们有条件地使用useState钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditiona ...
- React报错之Invalid hook call
正文从这开始~ 总览 导致"Invalid hook call. Hooks can only be called inside the body of a function compone ...
- React报错之react component changing uncontrolled input
正文从这开始~ 总览 当input的值被初始化为undefined,但后来又变更为一个不同的值时,会产生"A component is changing an uncontrolled in ...
- React报错之React Hook useEffect has a missing dependency
正文从这开始~ 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing depende ...
- React报错之React Hook 'useEffect' is called in function
正文从这开始~ 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function ...
- react 报错的堆栈处理
react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...
- git commit -m "XX"报错 pre -commit hook failed (add --no-verify to bypass)问题
在同步本地文件到线上仓库的时候 报错 pre -commit hook failed (add --no-verify to bypass) 当你在终端输入git commit -m "xx ...
- React报错之Expected `onClick` listener to be a function
正文从这开始~ 总览 当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生"Expected onClick listener to be a function" ...
- React报错 :browserHistory doesn't exist in react-router
由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...
随机推荐
- Java随谈(六)## 我们真的理解 Java 里的整型吗?
我们真的理解 Java 里的整型吗 整型是我们日常生活中最常用到的基础数据类型,看这篇文章之前,我想问: 我们真的像自己认为的那么理解 Java 内的整型吗? 也许看完本篇文章你就有自己的答案. C ...
- sklearn练习1 回归
from sklearn.svm import SVR from sklearn.pipeline import make_pipeline from sklearn.preprocessing im ...
- 一文带你了解J.U.C的FutureTask、Fork/Join框架和BlockingQueue
摘要: J.U.C是Java并发编程中非常重要的工具包,今天,我们就来着重讲讲J.U.C里面的FutureTask.Fork/Join框架和BlockingQueue. 本文分享自华为云社区<[ ...
- 【Java面试】Mybatis中#{}和${}的区别是什么?
一个工作2年的粉丝,被问到一个Mybatis里面的基础问题. 他跑过来调戏我,说Mic老师,你要是能把这个问题回答到一定高度,请我和一个月奶茶. 这个问题是: "Mybatis里面#{}和$ ...
- html关键字大全
html标签属性大全 html标签属性大全从网上搜集整理的常用html标签,供朋友们交流学习html用. html标签<marquee> <marquee>...</ma ...
- Java上传文件至SFTP服务器
Windows搭建SFTP服务器 https://www.cnblogs.com/wangjunguang/p/9453611.html 注意点: 1.以管理员权限运行FreeSSHd 2.如果无法启 ...
- HMS Core新闻行业解决方案:让技术加上人文的温度
开发者们,你希望用户如何获取新闻? 有的人靠手机弹窗知天下事,有的人则在新闻应用中尽览每一篇文章:有的人一目十行,有的人则喜欢细细咀嚼:有的人主动探索,有的人则想要应用投其所好. 科技在不断刷新着用户 ...
- 使用HBuilder X编辑器安装终端窗口插件未响应的解决方案
一.打开HBuilder X根目录 依次找到main.js HBuilderX \ plugins \ builtincef3terminal \ script \ main.js 二.编辑main. ...
- 论文解读(LG2AR)《Learning Graph Augmentations to Learn Graph Representations》
论文信息 论文标题:Learning Graph Augmentations to Learn Graph Representations论文作者:Kaveh Hassani, Amir Hosein ...
- 【python基础】第05回 数据类型,交互,格式化输出,运算符
上节内容回顾 1.python的注释 # 单行注释 pycharm快捷键:ctrl+? '''多行注释''' """多行注释""" 2.py ...