react报错解决 Rendered more fewer hooks than during the previous render

错误

此次渲染比上次渲染多出了hook

错误实例代码

点击是否显示Son组件时候会报错

//父亲组件
const Father = (props) => {const [fatherState,setFatherState] =useState(false)return(<><span onClick={()=>{setFatherState(!fatherState)}}>是否显示Son组件</span>{fatherState?Son():null}  //注意这里的子组件使用方法</>)
}//子组件
const Son=()=>{const [sonState,setSonState] =useState(false)return(<><span onClick={()=>{setSonState(!sonState)}}>点击显示/隐藏内容</span>{sonState?'---son的内容---':null}</>)
}export default Father

错误产生的原因

这里看到我调用Son组件是这样当做一个普通函数Son()进行调用而不是当做<Son/>组件进行调用
且这个被当成普通函数使用的Son子组件内使用了react hook,示例中使用了useState

解决方法

使用标准的<Son/>即函数组件。
虽然使用Son()这种方法也是可以渲染，函数组件本来就是个函数，返回的的确是<>…</>也能被识别，但是你这当成普通函数用就不能在里面使用hook。
简单就是把函数组件当成普通函数去使用，渲染的时候react认为就是普通的函数违反了原则

只在 React Functions 调用 Hooks
不要在常规 JavaScript 函数(普通函数)中调用 Hook

同理另外个错误也是一样的道理

我把FatherState默认值改成true，点击是否显示Son组件时候不就Son消失了吗，Son的useState就没了。

const [fatherState,setFatherState] =useState(true)

Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

react报错解决 Rendered more fewer hooks than during the previous render相关推荐

react 中使用import()实现按需加载报错解决方法 --‘import’ and ‘export’ may only appear at the top level
react 中使用import()实现按需加载报错解决方法 --'import' and 'export' may only appear at the top level 参考文章: (1)rea ...
React报错：Too many re-renders
React报错:Too many re-renders. React limits the number of renders to prevent an infinite loop. Too man ...
react报错：Type ‘{}‘ is not assignable to type ‘ReactNode‘
终端出现 Type '{}' is not assignable to type 'ReactNode'报错解决办法: 通过更新 @types/react package.json中 - " ...
连接远程服务器CredSSP加密Oracle修正报错解决办法
连接远程服务器CredSSP加密Oracle修正报错解决办法: 打开注册表,快捷输入 "regedit"(类似找命令提示符输入 cmd 一样)找文件夹路径:HKLM(缩写)\S ...
从零开始在ubuntu上安装和使用k8s集群及报错解决
文章目录安装docker 安装kubernetes 配置k8s集群配置虚拟机网络配置Master节点的k8s网络拉取k8s需要的镜像启动 kubeadm 和 kubelet 配置 node节 ...
Linux/ubuntu 安装 redis 4.0报错解决：redis-server.service: Can't open PID file /var/run/redis/redis-server.
此文首发于我的个人博客:Linux/ubuntu 安装 redis 4.0报错解决:redis-server.service: Can't open PID file /var/run/redis/r ...
Python-PyCharm 报错解决：ImportError: cannot import name 'InteractiveConsole' from 'code'
此文首发于我的个人博客:Python-PyCharm 报错解决:ImportError: cannot import name 'InteractiveConsole' from 'code' - z ...
报错解决：RequestsDependencyWarning: urllib3 (1.24.3) or chardet (3.0.4) doesn't match a supported versio
此文首发于我的个人博客:报错解决 RequestsDependencyWarning urllib3 (1.24.3) or chardet (3.0.4) doesn't match a suppo ...
报错解决：ad NaCl helper startup ack (0 bytes)
此文首发于我的个人博客:报错解决:ad NaCl helper startup ack (0 bytes) - zhang0peter的个人博客在使用pyppeteer操作Chrome进行爬虫时,大 ...
anaconda -spyder报错解决-UnicodeDecodeError: 'gbk' codec can't decode byte 0x93 in position 611: illegal
此文首发于我的个人博客:anaconda -spyder报错解决-UnicodeDecodeError 'gbk' codec can't decode byte 0x93 in position 6 ...