React报错之React hook 'useState' cannot be called in a class component
2023-02-18 16:41:39 时间
正文从这开始~
总览
当我们尝试在类组件中使用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
关键字,并使我们能够使用内置和自定义钩子。
相关文章
- 【已解决】Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon runnin
- 【已解决】springboot在使用redisTemplate的测试的时候报空指针
- 差两个像素让我很难受,这问题绝不允许留到明年!
- React DevUI 18.0 正式发布🎉
- 好慌,我代码没了!不会是变基变出问题了吧?
- 老板:你为什么要选择 Vue?
- 实用的 Bash 快捷键
- Quill基本使用和配置 - DevUI
- Quill富文本编辑器的实践 - DevUI
- 如何解决异步接口请求快慢不均导致的数据错误问题? - DevUI
- 让我们一起建设 Vue DevUI 项目吧!🥳
- 号外号外!DevUI Admin V1.0 发布啦!
- 手把手教你搭建自己的Angular组件库 - DevUI
- 2021 年最值得推荐的 7 个 Angular 前端组件库 - DevUI
- 立完flag,你可能需要对flag进行量化
- html2canvas实现浏览器截图的原理(包含源码分析的通用方法)
- 在瀑布下用火焰烤饼:三步法助你快速定位网站性能问题(超详细)
- 大厂是如何用DevCloud流水线实现自动化部署Web应用的?
- 手把手教你使用Rollup打包并发布自己的工具库
- 前端有了这两样神器,再也不用追着后台要接口啦