正文从这开始~
总览
当我们尝试在类组件中使用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 ();
}
}导致这个错误的原因是，钩子只能在函数组件或自定义钩子中使用，而我们正试图在一个类中使用钩子。函数组件 【React报错之React hook 'useState' cannot be called】解决该错误的一种方法是，将类组件转换为函数组件。
// App.js
import {useState, useEffect} from 'react';
export default function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('hello world');
}, []);
return (Count {count}
);
}就像文档中所说的那样：
- 只从React函数组件或自定义钩子中调用Hook
- 只在最顶层使用 Hook
- 不要在循环，条件或嵌套函数中调用 Hook
- 确保总是在你的 React 函数的最顶层以及任何 return 之前使用 Hook
setState()方法更新状态。// App.js
import React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}render() {
return (Count: {this.state.count}
);
}
}请注意，在较新的代码库中，函数组件比类更常被使用。
它们也更方便，因为我们不必考虑
this关键字，并使我们能够使用内置和自定义钩子。推荐阅读
- React报错之React Hook 'useEffect' is called in function
- React报错之React hook 'useState' is called conditionally
- react.js|react学习----jsx语法
- react.js|react学习----组件
- React报错之Expected an assignment or function
- React报错之Unexpected default export of anonymous function
- 前端|前端食堂技术周刊第 44 期（Bun、Vue.js 挑战、React 状态管理的新浪潮、Can I DevTools、函数式编程）
- React报错之Expected `onClick` listener to be a function
- React报错之Type '() => JSX.Element[]' is not assignable