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

这篇文章主要为大家介绍了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 (  
 ); } }

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

函数组件

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

// 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()

另外，我们可以使用一个类组件，用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关键字，并使我们能够使用内置和自定义钩子。

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

以上就是解决React hook 'useState' cannot be called in a class component报错的详细内容，更多关于React报错useState component的资料请关注0133技术站其它相关文章！

以上就是解决React hook 'useState' cannot be called in a class component报错的详细内容，更多请关注0133技术站其它相关文章！