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 { ...
随机推荐
- 在 Traefik Proxy 2.5 中使用/开发私有插件(Traefik 官方博客)
Traefik Proxy 在设计上是一个模块化路由器,允许您将中间件放入您的路由中,并在请求到达预期的后端服务目的地之前对其进行修改. Traefik 内置了许多这样的中间件,还允许您以插件的形式加 ...
- MCDF实验2
目录 接口的使用 仿真的结束 类的例化和类的成员 接口的使用 问题1.1:可以看到之前的实验 channel initiator 发送的数据例如 valid 和 data 与时钟 clk 均在同 ...
- npm切换到国内华为云的镜像
npm下载包很慢?不能忍,切换到国内华为云的镜像吧. npm config set registry https://repo.huaweicloud.com/repository/npm/ npm ...
- composition api和react hooks的对比
一. 我的走位: 保持中立 1. 各有各的好处, 谁也别说谁 2. 一个东西带来的好处, 相应的副作用肯定也有, 人无完人 二 . vue3 的composition api 和 rea ...
- Linux定时任务--Crond使用教程
Linux定时任务--Crond使用教程 1. 介绍Crond crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后 ...
- js 表面使用 表面学习 -输出
JavaScript 能够以不同方式"显示"数据: 使用 window.alert() 写入警告框 使用 document.write() 写入 HTML 输出 使用 innerH ...
- MYSQL的事务和索引
事务 什么是事务 事务就是将一组SQL语句放在同一批次内去执行 如果一个SQL语句出错,则该批次内的所有SQL都将被取消执行 MySQL事务处理只支持InnoDB和BDB数据表类型 事务的ACID原则 ...
- nginx启动失败/报错(bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket...permissions) nginx启动失败
出现这个问题是因为80端口被占用了 1.cmd输入命令netstat -aon|findstr "80" 2..查看80端口 16356对应的任务 输入命令 tasklist|fi ...
- windows server2012R2 上 .net core IIS 部署--应用程序池 自动停止
在windows server2016安装部署.NET CORE时,只需要将.net core应用程序池设置无托管,然后对应你项目的版本安装一个dotnet-hosting-2.2.6-win.exe ...
- Android Studio 的初次使用
记录我第一次使用Android Studio时遇到的问题以及一些简单的笔记. 我所使用的是Android Studio 2.2版本 遇到的问题 创建一个Hello World!项目无疑是相当简单的,我 ...