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"，可以將函數名的第一個字母大寫，或者使用use作為函數名的前綴。比如說，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>
);
}
上述代碼片段的問題在于，我們在一個函數中使用了useEffect鉤子，而這個函數不是一個組件，因為它以小寫字母開頭，也不是一個自定義鉤子，因為它的名字不是以use開頭。
聲明組件
如果你想聲明一個組件，請將你的函數的第一個字母大寫。
// 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>
);
}
函數名必須以大寫字母開頭，因為這有助于React區(qū)分諸如p、div、span等內置元素和我們定義的組件。
就像文檔中所說的：
- 只從React函數組件或自定義鉤子中調用Hook
- 只在最頂層使用 Hook
- 不要在循環(huán)，條件或嵌套函數中調用 Hook
- 確保總是在你的 React 函數的最頂層以及任何 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才能識別你的函數是一個自定義鉤子。
總結
為了解決"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function"的錯誤，確保只從React函數組件或自定義鉤子中調用鉤子。
翻譯原文鏈接：bobbyhadz.com/blog/react-…
以上就是React Hook 'useEffect' is called in function報錯解決的詳細內容，更多關于React報錯Hook useEffect function的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家介紹了JS跨域解決方案react配置反向代理的示例內容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2021-11-11
React實現(xiàn)錨點跳轉組件附帶吸頂效果的示例代碼
這篇文章主要為大家詳細介紹了React如何實現(xiàn)移動端錨點跳轉組件附帶吸頂效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-01-01
React Native可復用 UI分離布局組件和狀態(tài)組件技巧
這篇文章主要為大家介紹了React Native可復用 UI分離布局組件和狀態(tài)組件使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
React?Hooks使用startTransition與useTransition教程示例
這篇文章主要為大家介紹了React?Hooks使用startTransition與useTransition教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
useReducer?createContext代替Redux原理示例解析
這篇文章主要為大家介紹了useReducer?createContext代替Redux原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了在?React?Native?中給第三方庫打補丁的過程解析,有時使用了某個React Native 第三方庫，可是它有些問題，我們不得不修改它的源碼，本文介紹如何修改源碼又不會意外丟失修改結果的方法，需要的朋友可以參考下2022-08-08
路由管理的功能主要指的頁面跳轉、goBack、帶參數跳轉等功能,這篇文章主要給大家介紹了關于React Native自定義路由管理的相關資料,需要的朋友可以參考下2021-08-08
lazy是React提供的懶（動態(tài)）加載組件的方法，React.lazy()，路由組件代碼會被分開打包，能減少打包體積、延遲加載首屏不需要渲染的組件，依賴內置組件Suspense標簽的fallback屬性，給lazy加上loading指示器組件，Suspense目前只和lazy配合實現(xiàn)組件等待加載指示器的功能2023-03-03
map()方法是在React中常用的數組處理方法之一,可以用于遍歷數組、生成組件列表以及進行數據轉換等操作,通過合理運用map()方法,可以更靈活地處理和展示數據,下面給大家講解react map使用方法,感興趣的朋友一起看看吧2023-10-10
ReactHook使用useState更新變量后,如何拿到變量更新后的值
這篇文章主要介紹了ReactHook使用useState更新變量后,如何拿到變量更新后的值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03