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

翻译原文链接：bobbyhadz.com/blog/react-…

以上就是React Hook 'useEffect' is called in function报错解决的详细内容，更多关于React报错Hook useEffect function的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • React hook 'useState' is called conditionally报错解决

    目录 总览 顶层调用 总览 当我们有条件地使用useState钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditionally"错误.为了解决该错误,将所有React钩子移到任何可能油返回值的条件之上. 这里有个例子用来展示错误是如何发生的. import React, {useState} from 'react'; export default function App() { const [count,

  • 解决React报错Parameter 'props' implicitly has an 'any' type

    目录 总览 安装类型文件 声明类型 泛型 重新安装 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an 'any' type"错误.为了解决这个错误,在你的组件中明确地为props对象设置一个类型. 安装类型文件 你首先要确定的是你已经安装了React类型声明文件.在项目的根目录下打开终端,并运行以下命令. # ️ with NPM npm install --s

  • 解决React报错Rendered more hooks than during the previous render

    目录 总览 顶层调用 条件之上 总览 当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时,会产生"Rendered more hooks than during the previous render"错误.为了解决该错误,将所有的钩子移到函数组件的顶层,以及不要在条件中使用钩子. 这里有个示例用来展示错误是如何发生的. // App.js import {useEffect, useState} from 'react'; export default function App

  • 解决React报错Property does not exist on type 'JSX.IntrinsicElements'

    目录 总览 组件大写 类型声明 总结 总览 当组件名称以小写字母开头时,会导致"Property does not exist on type 'JSX.IntrinsicElements'"错误.为了解决该错误,确保组件名称总是以大写字母开头,安装React声明文件并重启你的开发服务器. 这里有个示例用来展示错误是如何发生的. // App.tsx // ️ name starts with lowercase letter function myComponent() { retu

  • 解决React hook 'useState' cannot be called in a class component报错

    目录 总览 函数组件 类组件中使用setState() 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class component"错误.为了解决该错误,请将类组件转换为函数组件.因为钩子不能在类组件中使用. 这里有个例子用来展示错误是如何发生的. // App.js import {useState, useEffect} from 'react'; class Example

  • 解决React报错You provided a `checked` prop to a form field

    目录 总览 defaultChecked onChange 初始值 总览 当我们在多选框上设置了checked 属性,却没有onChange 处理函数时,会产生"You provided a checked prop to a form field without an onChange handler"错误.为了解决该错误,可以使用defaultChecked 属性,或者在表单字段上设置onChange 属性. 这里有个例子用来展示错误是如何发生的. // App.js export

  • 解决React报错React Hook useEffect has a missing dependency

    目录 总览 禁用规则 依赖移入 依赖移出 useMemo useCallback 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing dependency"警告.为了解决该错误,禁用某一行的eslint规则,或者将变量移动到useEffect钩子内. 这里有个示例用来展示警告是如何发生的. // App.js import React, {useEffect, useState}

  • 解决React报错Invalid hook call

    目录 总览 版本匹配 调用组件 总览 导致"Invalid hook call. Hooks can only be called inside the body of a function component"错误的有多种原因: react和react-dom的版本不匹配. 在一个项目中有多个react包版本. 试图将一个组件作为一个函数来调用,例如,App()而不是<App />. 在类里面使用钩子,或者在不是组件或自定义钩子的函数中使用钩子. 版本匹配 在项目的根目录

  • 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.j

  • React报错解决之ref返回undefined或null

    目录 总览 useEffect 事件 总结 总览 当我们试图在其对应的DOM元素被渲染之前访问其current属性时,React的ref通常会返回undefined或者null.为了解决该问题,可以在useEffect钩子中访问ref,或者当事件触发时再访问ref. import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(); console.log(ref.curre

  • Objects are not valid as a React child报错解决

    目录 总览 map JSON.stringify Date 花括号 async 总结 总览 当我们尝试在JSX代码中,直接渲染对象或者数组时,会产生"Objects are not valid as a React child"错误.为了解决该错误,在JSX代码中,使用map()方法来渲染数组或者访问对象的属性. 下面是错误如何发生的示例. export default function App() { const employees = [ {id: 1, name: 'Alice'

  • 详解BadTokenException报错解决方法

    详解BadTokenException报错解决方法

    线上出现了如上的 crash,第一解决反应是在 show dialog 之前做个 isFinish 和 isDestroyed 判断,当我翻开代码正要解决时,我惊了,原来已经做过了如上的判断检测,示例伪代码如下: public void showDialog(Activity activity){ new OkHttp().call(new Callback(){ void onSucess(Response resp){ if(activity!=null && !activity.is

  • 在uni-app中使用element-ui的方法与报错解决

    uni-app的相关UI组件库中可能会没有你想要的功能组件,自己去开发的话需要花很多时间,此时咱们可以将别的UI组件库给安装到uni-app中来,达到直接使用该UI组件库的功能组件,例如,安装element-ui uni-app使用element-ui需安装以下插件 npm i element-ui -S 按需引入组件需要装以下插件 npm install babel-plugin-component -D 当你安装完以上插件后,需要在main.js中进行引入,例如引入全部: import Vu

  • 关于JavaScript使用export和import的两个报错解决

    关于JavaScript使用export和import的两个报错解决

    目录 前言 报错:Uncaught SyntaxError: Cannot use import statement outside a module 报错:Uncaught SyntaxError: The requested module ‘…/js/ui.js’ does not provide an export named ‘default’ 总结 前言 作为一个前端小白,最近在学习使用JavaScript中的export和import,遇到了两个报错,特地记录下来. 报错:Uncau

  • SpringMail使用过程中的报错解决办法

    SpringMail使用过程中的报错解决办法 1.Unable to locate provider for protocol: smtp –>缺少依赖造成的 <dependency> <groupId>javax.mail</groupId> <artifactId>mail</artifactId> <version>1.4</version> </dependency> <dependency

  • IntelliJ IDE运行Tomcat报错解决办法

    IntelliJ IDE运行Tomcat报错解决办法

     IntelliJ IDE运行Tomcat报错解决办法 由于Tomcat默认关闭JMX功能,但IntelliJ IDE配置的IDE需要提供JMX功能,所以IntelliJ IDE运行Tomcat报错:Unable to ping server at localhost:1099! 解决的办法: 1.为Tomcat开启JMX功能,比较麻烦. 2.不使用JMX功能,修改host文件: 127.0.0.1 localhost [添加计算机名] 例如我的计算机名为Linux,所以设置为 127.0.0.

随机推荐