解决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
关键字,并使我们能够使用内置和自定义钩子。
翻译原文链接:bobbyhadz.com/blog/react-…
以上就是解决React hook 'useState' cannot be called in a class component报错的详细内容,更多关于React报错useState component的资料请关注脚本之家其它相关文章!
相关文章
浅谈react-native热更新react-native-pushy集成遇到的问题
下面小编就为大家带来一篇浅谈react-native热更新react-native-pushy集成遇到的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-09React antd中setFieldsValu的简便使用示例代码
form.setFieldsValue是antd Form组件中的一个方法,用于动态设置表单字段的值,它接受一个对象作为参数,对象的键是表单字段的名称,值是要设置的字段值,这篇文章主要介绍了React antd中setFieldsValu的简便使用,需要的朋友可以参考下2023-08-08
最新评论