[React] Fix "React Error: Rendered fewer hooks than expected"
In this lesson we'll see an interesting situation where we're actually calling a function component and getting a dreaded React error: "Rendered fewer hooks than expected." We'll learn why that is happening, how it can be avoided, and how our "workaround" fixes the problem and avoids potential bugs.
More info: Don't call a React function component
Basiclly React hooks need to assoicate to one React component:
function Counter() {
const [count, setCount] = React.useState(0)
const increment = () => setCount(c => c + 1)
return <button onClick={increment}>{count}</button>
}
function BadCounterList() {
const [items, setItems] = React.useState([])
const addItem = () => setItems(i => [...i, {id: i.length}])
return (
<div>
<button onClick={addItem}>Add Item</button>
<div>{items.map(Counter)}</div>
</div>
)
}
The way we create Counter components is:
items.map(Counter)
Which React doesn't consider it is a React component, The hooks inside Counter function will be associated to BadCounterList. AKA: React function component doesn't work well with hooks.
function GoodCounterList(params) {
const [items, setItems] = React.useState([])
const addItem = () => setItems(i => [...i, {id: i.length}])
return (
<div>
<button onClick={addItem}>Add Item</button>
<div>
{items.map(i => (
<Counter key={i.id} />
))}
</div>
</div>
)
}
Here we create React component by using:
<Counter key={i.id} />
[React] Fix "React Error: Rendered fewer hooks than expected"的更多相关文章
- React报错之Rendered more hooks than during the previous render
正文从这开始~ 总览 当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时,会产生"Rendered more hooks than during the previous render ...
- react之react Hooks
函数组件,没有 class 组件中的 componentDidMount.componentDidUpdate 等生命周期方法,也没有 State,但这些可以通过 React Hook 实现. Rea ...
- [React Testing] JSX error diffs -- expect-jsx library
When writing React component tests, it can be hard to decipher the error diffs of broken tests, sinc ...
- [React] Handle React Suspense Errors with an Error Boundary
Error Boundaries are the way you handle errors with React, and Suspense embraces this completely. Le ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- JavaScript 和 React,React用了大量语法糖,让JS编写更方便。
https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0 ...
- [React] Understand React.Children Utilities
The data contained in this.props.children is not always what you might expect. React provides React. ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- 小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
随机推荐
- c++作业题sin公式
今日 有一位同样读大一的朋友向我求助有关c++的作业题 他说他的程序逻辑正确 但是结果的精度不对 题目如下: 这是一道看起来十分简单的作业题 我按照要求快速地写了一个版本 不出所料 一样遇到了精度问题 ...
- [终极巨坑]golang+vue开发日记【三】,登陆界面制作(二)
写在前面 本期内容是承接上期已经做好了登陆界面来写的,不过本期是以golang为主,可能需要大家把最基本的语法结构熟悉一下:菜鸟教程.这样的话方便展开,自然而然的,本篇也是直接实战为主.这次需要依赖m ...
- linux 1-常用命令
文件处理命令: 命令格式:命令 [-选项] [参数] 例如:ls -la /etc 多个选项可以写在一起,不区分前后关系,例如 -l 和 -a 一起写成 -la 目录处理命令:ls (就是list ...
- NOI2019网络同步赛游记
我发的邮件**f没收到,后来去专门询问才整到一个名额(估计是嫌我太菜,参加了也是垫底) day -1 上午写了到类似随机游走的高斯消元期望dp,然后颓颓颓 下午打洛咕月赛.T1一直50pts,后来才知 ...
- FusionInsight大数据开发---SparkStreaming概述
SparkStreaming概述 SparkStreaming是Spark核心API的一个扩展,它对实时流式数据的处理具有可扩展性.高吞吐量.可容错性等特点. SparkStreaming原理 Spa ...
- ES7.3.0配置
# elasticsearch.yml cluster.name: my-application node.name: node-1 node.master: true node.ingest: tr ...
- c# winform结合数据库动态生成treeview的父节点和子节点方法和思路
tb_food表的结构如图一: tb_foodtype表的结构如图二: //获取tb_foodtype表中的所有数据 private void InitDataTable() { SqlConnect ...
- Beego 学习笔记14:Session控制
Session控制 1> Session常用来作为全局变量使用,比如记录当前登录的用户,或者页面之间传递数据使用. 2> Beego框架内置了 session 模块,目前 ...
- 转 根据CPU核心数确定线程池并发线程数
转自: https://www.cnblogs.com/dennyzhangdd/p/6909771.html?utm_source=itdadao&utm_medium=referral 目 ...
- MySQL添加用户、为用户分配权限
登录MySQL登录本地用户 mysql -u root -p登录外网用户(需要注意服务器可能只允许本地登录,需要修改响应的配置文件) mysql -u zhrt -h 10.64.6.4 -p添加用户 ...