快捷導(dǎo)航

React Hook 'useEffect' is called in function報錯解決

更新時間：2022年12月02日 10:22:32 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了React Hook 'useEffect' is called in function報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

總覽

為了解決錯誤"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function"，可以將函數(shù)名的第一個字母大寫，或者使用use作為函數(shù)名的前綴。比如說，useCounter使其成為一個組件或一個自定義鉤子。

這里有個示例用來展示錯誤是如何發(fā)生的。

// App.js
import React, {useEffect, useState} from 'react';
// ??? Not a component (lowercase first letter)
// not a custom hook (doesn't start with use)
function counter() {
  const [count, setCount] = useState(0);
  // ?? React Hook "useEffect" is called in function "counter" that
  // is neither a React function component nor a custom React Hook function.
  // React component names must start with an uppercase letter.
  // React Hook names must start with the word "use".
  useEffect(() => {
    console.log(count);
  }, [count]);
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

上述代碼片段的問題在于，我們在一個函數(shù)中使用了useEffect鉤子，而這個函數(shù)不是一個組件，因為它以小寫字母開頭，也不是一個自定義鉤子，因為它的名字不是以use開頭。

聲明組件

如果你想聲明一個組件，請將你的函數(shù)的第一個字母大寫。

// App.js
import React, {useEffect, useState} from 'react';
// ??? is now a component (can use hooks)
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(count);
  }, [count]);
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

函數(shù)名必須以大寫字母開頭，因為這有助于React區(qū)分諸如p、div、span等內(nèi)置元素和我們定義的組件。

就像文檔中所說的：

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

聲明自定義鉤子

如果你想聲明一個自定義鉤子，自定義鉤子的名稱必須以use開頭，比如說useCounter。

import React, {useEffect, useState} from 'react';
// ??? is a custom hook (name starts with use)
function useCounter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(count);
  }, [count]);
  return [count, setCount];
}
export default function App() {
  const [count, setCount] = useCounter();
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

自定義鉤子的名字必須以use開頭，這樣React才能識別你的函數(shù)是一個自定義鉤子。

總結(jié)

為了解決"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function"的錯誤，確保只從React函數(shù)組件或自定義鉤子中調(diào)用鉤子。

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

以上就是React Hook 'useEffect' is called in function報錯解決的詳細內(nèi)容，更多關(guān)于React報錯Hook useEffect function的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: