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",可以将函数名的第一个字母大写,或者使用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区分诸如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 (
<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的更多相关文章
- React报错之React Hook useEffect has a missing dependency
正文从这开始~ 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing depende ...
- React报错之React hook 'useState' cannot be called in a class component
正文从这开始~ 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class compo ...
- React报错之Invalid hook call
正文从这开始~ 总览 导致"Invalid hook call. Hooks can only be called inside the body of a function compone ...
- React报错之React hook 'useState' is called conditionally
正文从这开始~ 总览 当我们有条件地使用useState钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditiona ...
- React报错之Expected `onClick` listener to be a function
正文从这开始~ 总览 当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生"Expected onClick listener to be a function" ...
- React报错之react component changing uncontrolled input
正文从这开始~ 总览 当input的值被初始化为undefined,但后来又变更为一个不同的值时,会产生"A component is changing an uncontrolled in ...
- react 报错的堆栈处理
react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...
- 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 ...
- 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 ...
随机推荐
- MySQLDocker 主从复制搭建
MySQLDocker 主从复制搭建 MySQLDocker 的搭建 docker search mysql docker pull mysql/mysql-server:8.0.26 docker ...
- element ui 自定义主题失败(primordials is not defined)
卸载: 1.卸载cnpm npm uninstall cnpm -g 2.卸载vue-cli npm uninstall @vue/cli -g 3.卸载nodejs和删除文件 C:\Program ...
- 在VMware Workstation 16上安装Windows7虚拟机以及VMware tools安装失败解决方法
安装VMware Workstation 16 搜素"VMware Workstation下载" 下载 VMware Workstation Pro 下载Windows7系统镜像 ...
- CODING DevOps 助力中化信息打造新一代研效平台,驱动“线上中化”新未来
中化信息技术有限公司,简称"中化信息",是世界 500 强企业中国中化控股有限责任公司(简称"中国中化")的全资直属公司,依托于中国中化的信息化建设实践,建立起 ...
- js与java encodeURI 进行编码与解码
JS escape()使用转义序列替换某些字符来对字符串进行编码 JavaScript 中国 编码后 JavaScript %u4E2D%u56FD unescape()对使用 encodeUR ...
- 所有人都说Python 简单易学,为何我觉得难?
来谈谈心 记得刚学Python的时候,几乎所有人都说Python 简单易学,而对于编程零基础,只掌握Word和Excel的人来说,感觉真的好难. 学习之前网上的教材看了,Python的书也看了,包括& ...
- TypeScript let与var的区别
1.作用域不同 用var声明的变量,只有函数作用域和全局作用域,没有块级作用域.而let可以实现块级作用域,只能在代码块{}内有效,在{}之外不能访问,如下代码所示: { let a = 0; var ...
- 传统 API 管理与测试过程正面临严峻的挑战
随着测试左移思想的引入, API (应用程序编程接口)经济的飞速增长导致对 API 管理平台的需求相应增加.越来越多的企业注重并关注接口测试.单纯的做接口测试或者做好接口测试的本质工作其实并不复杂: ...
- led跑马灯多种方法(移位法,位拼接法,调用模块法,位移及位拼接语法,testbench的理解,源文件的存储路径,计数器的个数,调用模块的方式)
跟着教程写了几种方法,才发现自己写的虽然能实现,但比较繁琐.教程有三种方法: 1.移位法,每次左移一位,相比我自己写的,优点是不用把每一种情况都写出来.但是需要考虑左移到最后一位时需要自己再写个赋值语 ...
- 浅谈hooks——useEffect
react 16.8发布以来,函数式写法逐渐取代class的写法,在react函数式写法中,最重要是就是react所推出的新特性:hook,今天就来简单谈谈最基础的hook--useEffect 在r ...