正文从这开始~

总览

为了解决错误"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. VMware 安装 Anolis OS

    安装时参考的以下文章 VMware Workstation Pro 虚拟机安装 VMware Workstation Pro 安装 龙蜥操作系统(Anolis OS) Anolis OS 8 安装指南 ...

  2. 3D大场景展示功能你了解多少?见详解!

    裸眼3D技术的出现打破了真实与虚拟的界限,人们不仅希望能够体验奇妙的虚拟场景,也希望足不出户在短短几分钟内就能看到遍布各地的场景,希望能实时对接关键数据. 裸眼3D技术的出现打破了真实与虚拟的界限,人 ...

  3. 二:动手实操SpringBoot-使用Spring Initializr创建项目

    使用 Spring Initializr 初始化 Spring Boot 项目 Spring Initializr 从本质上说就是一个Web应用程序,它能为你构建Spring Boot项目结构. 虽然 ...

  4. $.fn解析

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...

  5. CesiumJS 2022^ 源码解读[0] - 文章目录与源码工程结构

    很高兴你能在浮躁的年代里还有兴趣阅读源代码,CesiumJS 至今已有十年以上,代码量也积累了三十多万行(未压缩状态). 我也很荣幸自己的文章能被读者看到,如果对你有帮助.有启发,点个赞就是对我最大的 ...

  6. JSON: JavaScript Object Notation

    JSON是JavaScript Object Notation 的缩写,是JS提供的一种数据交换格式.1) JSON对象本质上就是一个JS对象,但是这个对象比较特殊,它可以直接转换为字符串,在不同语言 ...

  7. ReentrantLock 公平锁源码 第1篇

    ReentrantLock 1 这篇还是接着ReentrantLock的公平锁,没看过第0篇的可以先去看上一篇https://www.cnblogs.com/sunankang/p/16456342. ...

  8. java枚举和注解

    枚举 一.枚举(enumeration) 是一组常量的集合,可以理解为:枚举属于一种特殊的类,里面只包含一组有限的特定的对象,构造方法默认为private. 二.枚举的两种实现方式 1.自定义实现枚举 ...

  9. jdbc 03:注册驱动的方式

    jdbc连接mysql时,注册驱动的方式 package com.examples.jdbc.o3_注册驱动方式; //mysql驱动所在的包 import com.mysql.jdbc.Driver ...

  10. 如何使用API接口批量查询图书信息?

    之前小编讲过在Excel表格中根据ISBN查询图书信息可以使用我们的图书查询公式,但偶然间发现少部分书籍由于年份久远导致查不出来,今天小编就教给大家另一种查询图书信息的方式,即通过API接口返回的JS ...