React报错之React Hook 'useEffect' is called in function react.js

正文从这开始~
总览为了解决错误"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function"，可以将函数名的第一个字母大写，或者使用use作为函数名的前缀。比如说，useCounter使其成为一个组件或一个自定义钩子。

文章图片

这里有个示例用来展示错误是如何发生的。

// App.jsimport 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 (Count: {count} ); }

上述代码片段的问题在于，我们在一个函数中使用了useEffect钩子，而这个函数不是一个组件，因为它以小写字母开头，也不是一个自定义钩子，因为它的名字不是以use开头。
声明组件如果你想声明一个组件，请将你的函数的第一个字母大写。

// App.jsimport 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 (Count: {count} ); }export default function App() { return (); }

函数名必须以大写字母开头，因为这有助于React区分诸如p、div、span等内置元素和我们定义的组件。
就像文档中所说的：

只从React函数组件或自定义钩子中调用Hook
只在最顶层使用 Hook
不要在循环，条件或嵌套函数中调用 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 (Count: {count} ); }

自定义钩子的名字必须以use开头，这样React才能识别你的函数是一个自定义钩子。
总结 【React报错之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"的错误，确保只从React函数组件或自定义钩子中调用钩子。