React Hook之钩子调用规则(不在循环、条件判断或者嵌套函数中调用)
文章目录
- React Hook之钩子调用规则(不在循环、条件判断或者嵌套函数中调用)
- 错误使用案例
- 案例具体解决方法
React Hook之钩子调用规则(不在循环、条件判断或者嵌套函数中调用)
hooks使用规则
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。(还有一个地方可以调用 Hook —— 就是自定义的 Hook 中)
错误使用案例
代码:
const useCustomItemRender = (originNode: React.ReactNode, file: CustomUploadFile) => {const [editing, setEditing] = useState(false);const [newName, setNewName] = useState(file.name);const handleEdit = () => {setEditing(true);};const handleSave = () => {setEditing(false);handleEditDescription(file.uid, newName);};const render = editing ? (<div><Inputvalue={newName}onChange={(e) => setNewName(e.target.value)}onPressEnter={handleSave}onBlur={handleSave}autoFocus/></div>) : (<div onClick={handleEdit}>{file.name}</div>);return render;};const customItemRender: ItemRender<CustomUploadFile> = (originNode, file) => {const render = useCustomItemRender(originNode, file);return render;};
报错:
React Hook “useCustomItemRender” is called in function “customItemRender: ItemRender” 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”.
报错解释:
这个错误表明你在React函数组件中使用了名为useCustomItemRender的自定义钩子(Hook),而这个钩子的使用发生在一个内嵌函数customItemRender中。React的钩子(Hooks)只能在函数组件的主体或者其他钩子中调用,而不能在嵌套函数或者控制流逻辑中调用。这个规则被称为“钩子调用规则”。
解决方法:
确保useCustomItemRender只在组件的主体中调用一次。如果customItemRender是一个独立的函数,你应该将useCustomItemRender的调用移到customItemRender函数外部,确保它不会在customItemRender内部被调用。如果customItemRender是一个React组件,那么应该将useCustomItemRender的调用保持在该组件的主体中。
// 不正确的使用方式
function MyComponent() {function customItemRender() {const [value, setValue] = useCustomItemRender(); // 错误,在内嵌函数中调用钩子// ...}// ...
}// 正确的使用方式
function MyComponent() {const [value, setValue] = useCustomItemRender(); // 正确,在组件主体中调用钩子function customItemRender() {// 使用value和setValue// ...}// ...
}
如果useCustomItemRender是一个自定义的钩子,它应该遵循React的钩子调用规则,即不在循环、条件判断或者嵌套函数中调用。如果需要在多个地方复用状态逻辑,可以考虑使用自定义组件或高阶组件。
总结:在内嵌函数 customItemRender 中调用了自定义的钩子 useCustomItemRender,而 React 钩子(Hooks)只能在函数组件的主体或其他钩子中调用,不能在嵌套函数中调用。
案例具体解决方法
为了解决这个问题,我们需要将 customItemRender 函数转换为一个自定义的 React 组件,以便在组件主体中调用钩子。
const CustomItemRender: React.FC<{ originNode: React.ReactNode, file: CustomUploadFile }> = ({ originNode, file }) => {const render = useCustomItemRender(originNode, file);return render;};const customItemRender: ItemRender<CustomUploadFile> = (originNode, file) => {const render = <CustomItemRender originNode={originNode} file={file} />;return render;};
这段代码定义了一个名为 CustomItemRender 的组件,并将其用作 customItemRender 函数的返回值。
通过将 customItemRender 函数转换为一个自定义的 React 组件 CustomItemRender,我们可以在组件主体中调用钩子。
相关文章:
React Hook之钩子调用规则(不在循环、条件判断或者嵌套函数中调用)
文章目录 React Hook之钩子调用规则(不在循环、条件判断或者嵌套函数中调用)错误使用案例案例具体解决方法 React Hook之钩子调用规则(不在循环、条件判断或者嵌套函数中调用) hooks使用规则 只能在函数最外层调用 Hook。不要在…...
深入理解TCP网络协议(3)
目录 1.前言 2.流量控制 2.阻塞控制 3.延时应答 4.捎带应答 5.面向字节流 6.缓冲区 7.粘包问题 8.TCP异常情况 9.小结 1.前言 在前面的博客中,我们重点介绍了TCP协议的一些属性,有连接属性的三次握手和四次挥手,还有保证数据安全的重传机制和确认应答,还有为了提高效率…...
JavaScript实现归并排序及vscode输出乱码解决
思路 归并排序思路:11.6 归并排序 - Hello 算法 总体上来讲就是 递归分解 归并排序 代码如下↓ 代码 //归并排序 function merge(left, right){console.log(flag);console.log(left);console.log(right);let result new Array();let il 0, ir 0;//左右两个数…...
Redis面试题40
人工智能如何影响医疗保健行业? 答:人工智能对医疗保健行业产生了深远的影响,为医疗保健提供了更高效、准确和个性化的服务。以下是一些人工智能在医疗保健领域的应用示例: 疾病诊断:人工智能可以利用机器学习和深度学…...
2024年危险化学品经营单位安全管理人员证考试题库及危险化学品经营单位安全管理人员试题解析
题库来源:安全生产模拟考试一点通公众号小程序 2024年危险化学品经营单位安全管理人员证考试题库及危险化学品经营单位安全管理人员试题解析是安全生产模拟考试一点通结合(安监局)特种作业人员操作证考试大纲和(质检局࿰…...
Kafka相关内容复习
为什么要用消息队列 解耦 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束。 可恢复性 系统的一部分组件失效时,不会影响到整个系统。消息队列降低了进程间的耦合度,所以即使一个处理消息的进程挂掉,加入队…...
JVM之Java内存区域
JVM-Java内存区域 Java内存区域是Java虚拟机(JVM)管理的内存资源的逻辑划分,用于存储程序运行时所需的数据。Java内存区域的合理划分和管理对于程序的性能和稳定性具有重要影响。本文将深入探讨Java内存区域的各个部分,包括方法区…...
几个MySQL系统调优工具
几个MySQL系统调优工具 可以使用下面几个工具来做基准测试: sysbench:一个模块化,跨平台以及多线程的性能测试工具。 https://github.com/akopytov/sysbench iibench-mysql:基于Java的MySQL / Percona / MariaDB 索引进行插入性能…...
Linux内核与驱动面试经典“小”问题集锦(2)
接前一篇文章:Linux内核与驱动面试经典“小”问题集锦(1) 问题2 问:spin_lock和spin_lock_irq以及spin_lock_irqsave的区别是什么?也可以说它们之间有什么区别和联系? 备注:此题是自旋锁问题的…...
windws安装mysql详细步骤
1.下载地址: https://dev.mysql.com/downloads/mysql/2.下载好mysql安装包后,将其解压到指定目录,并记下解压的目录,后续用于环境变量配置: 3. 在bin目录同级下创建一个文件,命名为my.ini [mysqld] # 设…...
Linux的库文件
目录 概述: 静态库: 静态库概述: 静态库的制作 共享库(动态库) 共享库概述 动态库制作 动态库临时生效 动态库长期生效 动态库的升级 位置无关代码 概述: 库文件一般就是编译好的二进制文件&…...
JAVA Web 学习(五)Nginx、RPC、JWT
十二、反向代理服务器——Nginx 支持热部署,几乎可以做到 7 * 24 小时不间断运行,即使运行几个月也不需要重新启动,还能在不间断服务的情况下对软件版本进行热更新。性能是 Nginx 最重要的考量,其占用内存少、并发能力强、能支持…...
Python编程的十大神奇依赖库
Python是一门广受欢迎的编程语言,其生态系统丰富多彩,拥有许多令人惊叹的依赖库,可以帮助程序员们在各种领域中创造出令人瞠目结舌的应用。在这篇文章中,我们将探讨Python编程的十大神奇依赖库,它们像魔法一样…...
Java类的继承
XHTMLMapper继承 XWPFDocumentVisitor: 由于endVisitTableCell是抽象方法,XHTMLMapper中必须要实现; existErr()子类是否重写都是自由的; public abstract class XWPFDocumentVisitor<T, O extends Options, E extends IXWPFM…...
【DC渗透系列】DC-4靶场
主机发现 arp-scan -l┌──(root㉿kali)-[~] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:6b:ed:27, IPv4: 192.168.100.251 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.100.1 00:50:56:c0:00:08 …...
开源软件全景解析:驱动技术创新与行业革新的力量
目录 什么是开源 开源的核心 开源软件的特点 为什么程序员应该拥抱开源 1.学习机会: 2.社区支持: 3.提高职业竞争力: 4.加速开发过程: 5.贡献和回馈: 开源软件的影响力 开源软件多元分析: 开源…...
目标检测及相关算法介绍
文章目录 目标检测介绍目标检测算法分类目标检测算法模型组成经典目标检测论文 目标检测介绍 目标检测是计算机视觉领域中的一项重要任务,旨在识别图像或视频中的特定对象的位置并将其与不同类别中的对象进行分类。与图像分类任务不同,目标检测不仅需要…...
跟着cherno手搓游戏引擎【20】混合(blend)
抽象: Renderer.h: #pragma once #include"RenderCommand.h" #include "OrthographicCamera.h" #include"Shader.h" namespace YOTO {class Renderer {public:static void Init();static void BeginScene(OrthographicCamera& …...
leetcode 3.无重复字符的最长字串(滑动窗口) (C++)DAY2
文章目录 1.题目示例提示 2.解答思路3.实现代码结果 4.总结 1.题目 给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度。 示例 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”,所以其长度为 3。 示…...
Android Build 依赖项
在项目中的Build.Gradle文件中dependencies代码块中添加指定依赖项。 有三种不同类型的依赖项 本地模块依赖项 implementation project(:mylibrary)这个mylibrary 必须在 settings.gradle 中使用的库名称相同 本地文件依赖项 implementation fileTree(dir: libs, include:…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
MFC 抛体运动模拟:常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storms…...
