快捷導(dǎo)航

解決React?hook?'useState'?cannot?be?called?in?a?class?component報(bào)錯(cuò)

更新時(shí)間：2022年12月02日 10:03:17 作者：Borislav?Hadzhiev

這篇文章主要為大家介紹了React?hook?'useState'?cannot?be?called?in?a?class?component報(bào)錯(cuò)解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們嘗試在類組件中使用useState 鉤子時(shí)，會(huì)產(chǎn)生"React hook 'useState' cannot be called in a class component"錯(cuò)誤。為了解決該錯(cuò)誤，請(qǐng)將類組件轉(zhuǎn)換為函數(shù)組件。因?yàn)殂^子不能在類組件中使用。

這里有個(gè)例子用來(lái)展示錯(cuò)誤是如何發(fā)生的。

// 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>
    );
  }
}

導(dǎo)致這個(gè)錯(cuò)誤的原因是，鉤子只能在函數(shù)組件或自定義鉤子中使用，而我們正試圖在一個(gè)類中使用鉤子。

函數(shù)組件

解決該錯(cuò)誤的一種方法是，將類組件轉(zhuǎn)換為函數(shù)組件。

// 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>
  );
}

就像文檔中所說(shuō)的那樣：

只從React函數(shù)組件或自定義鉤子中調(diào)用Hook
只在最頂層使用 Hook
不要在循環(huán)，條件或嵌套函數(shù)中調(diào)用 Hook
確保總是在你的 React 函數(shù)的最頂層以及任何 return 之前使用 Hook

類組件中使用setState()

另外，我們可以使用一個(gè)類組件，用setState()方法更新?tīng)顟B(tài)。

// 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>
    );
  }
}

請(qǐng)注意，在較新的代碼庫(kù)中，函數(shù)組件比類更常被使用。

它們也更方便，因?yàn)槲覀儾槐乜紤]this關(guān)鍵字，并使我們能夠使用內(nèi)置和自定義鉤子。

翻譯原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React hook 'useState' cannot be called in a class component報(bào)錯(cuò)的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)useState component的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: