正文从这开始~

总览

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

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

// 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区分诸如pdivspan等内置元素和我们定义的组件。

就像文档中所说的:

  • 只从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 (
<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函数组件或自定义钩子中调用钩子。

React报错之React Hook 'useEffect' is called in function的更多相关文章

  1. React报错之React Hook useEffect has a missing dependency

    正文从这开始~ 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing depende ...

  2. React报错之React hook 'useState' cannot be called in a class component

    正文从这开始~ 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class compo ...

  3. React报错之Invalid hook call

    正文从这开始~ 总览 导致"Invalid hook call. Hooks can only be called inside the body of a function compone ...

  4. React报错之React hook 'useState' is called conditionally

    正文从这开始~ 总览 当我们有条件地使用useState钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditiona ...

  5. React报错之Expected `onClick` listener to be a function

    正文从这开始~ 总览 当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生"Expected onClick listener to be a function" ...

  6. React报错之react component changing uncontrolled input

    正文从这开始~ 总览 当input的值被初始化为undefined,但后来又变更为一个不同的值时,会产生"A component is changing an uncontrolled in ...

  7. react 报错的堆栈处理

    react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...

  8. git commit -m "XX"报错 pre -commit hook failed (add --no-verify to bypass)问题

    在同步本地文件到线上仓库的时候 报错 pre -commit hook failed (add --no-verify to bypass) 当你在终端输入git commit -m "xx ...

  9. jquery3.1.1报错Uncaught TypeError: a.indexOf is not a function

    jquery3.1.1报错Uncaught TypeError: a.indexOf is not a function 使用1.9就没有问题,解决办法: 就是把写的代码中: $(window).lo ...

随机推荐

  1. MySQLDocker 主从复制搭建

    MySQLDocker 主从复制搭建 MySQLDocker 的搭建 docker search mysql docker pull mysql/mysql-server:8.0.26 docker ...

  2. element ui 自定义主题失败(primordials is not defined)

    卸载: 1.卸载cnpm npm uninstall cnpm -g 2.卸载vue-cli npm uninstall @vue/cli -g 3.卸载nodejs和删除文件 C:\Program ...

  3. 在VMware Workstation 16上安装Windows7虚拟机以及VMware tools安装失败解决方法

    安装VMware Workstation 16 搜素"VMware Workstation下载" 下载 VMware Workstation Pro 下载Windows7系统镜像 ...

  4. CODING DevOps 助力中化信息打造新一代研效平台,驱动“线上中化”新未来

    中化信息技术有限公司,简称"中化信息",是世界 500 强企业中国中化控股有限责任公司(简称"中国中化")的全资直属公司,依托于中国中化的信息化建设实践,建立起 ...

  5. js与java encodeURI 进行编码与解码

    JS escape()使用转义序列替换某些字符来对字符串进行编码  JavaScript 中国 编码后 JavaScript %u4E2D%u56FD unescape()对使用   encodeUR ...

  6. 所有人都说Python 简单易学,为何我觉得难?

    来谈谈心 记得刚学Python的时候,几乎所有人都说Python 简单易学,而对于编程零基础,只掌握Word和Excel的人来说,感觉真的好难. 学习之前网上的教材看了,Python的书也看了,包括& ...

  7. TypeScript let与var的区别

    1.作用域不同 用var声明的变量,只有函数作用域和全局作用域,没有块级作用域.而let可以实现块级作用域,只能在代码块{}内有效,在{}之外不能访问,如下代码所示: { let a = 0; var ...

  8. 传统 API 管理与测试过程正面临严峻的挑战

    随着测试左移思想的引入, API (应用程序编程接口)经济的飞速增长导致对 API 管理平台的需求相应增加.越来越多的企业注重并关注接口测试.单纯的做接口测试或者做好接口测试的本质工作其实并不复杂: ...

  9. led跑马灯多种方法(移位法,位拼接法,调用模块法,位移及位拼接语法,testbench的理解,源文件的存储路径,计数器的个数,调用模块的方式)

    跟着教程写了几种方法,才发现自己写的虽然能实现,但比较繁琐.教程有三种方法: 1.移位法,每次左移一位,相比我自己写的,优点是不用把每一种情况都写出来.但是需要考虑左移到最后一位时需要自己再写个赋值语 ...

  10. 浅谈hooks——useEffect

    react 16.8发布以来,函数式写法逐渐取代class的写法,在react函数式写法中,最重要是就是react所推出的新特性:hook,今天就来简单谈谈最基础的hook--useEffect 在r ...