[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,并之所以特别提出 ...
随机推荐
- 【转】Mac入门(一)基本用法
我前五年一直外包到微软,每天使用的都是Windows系统和.NET. 2012年加入VMware, 公司的工作机是台Mac 笔记本(MacBook Pro), 所以有机会接触Mac系统 Mac和Wi ...
- ORA-01779: 无法修改与非键值保存表对应的列
项目中通过子查询更新数据时遇到ORA-01779: 无法修改与非键值保存表对应的列,模拟过程如下: 1.创建测试表 CREATE TABLE tt1 (ID INT,col1 VARCHAR2()); ...
- 示例:WPF实现ApplicationCommands.Delete的TextBox
原文:示例:WPF实现ApplicationCommands.Delete的TextBox 目的:通过模仿TextBox中Ctrl+C等快捷键原理来了解CommandBindings实现原理,可以通过 ...
- Java Mockito 笔记
Mockito 1 Overview 2 Maven 项目初始化 3 示例 3.1 第一个示例 3.2 自动 Mock 3.3 Mock 返回值 3.4 Mock 参数 3.5 自动注入 Mock 对 ...
- https相关知识总结
从园子里看到很多讲解不错的文章,将链接放到这里,备忘 浅析数字证书:https://www.cnblogs.com/hyddd/archive/2009/01/07/1371292.html
- Python基础之datetime、sys模块
1.datetime模块 1)datetime.datetime.now(),返回各当前时间.日期类型. datetime.datetime.now(),返回当前日期. import datetime ...
- 安装fastnlp
直接 pip install fastnlp 如果出现 torch的安装报错,可能与操作系统及 CUDA 的版本相关.直接上pytorch 的官网 https://pytorch.org/get-st ...
- ip2region.jar实现ip转地址
ip转地址 根据ip地址查询出所在地址. GitHub地址 https://github.com/lionsoul2014/ip2region/ pom坐标 <dependency> &l ...
- JavaScript 事件(基础)
一.事件 事件:触发-响应机制. 二.事件三要素 1.事件源:触发事件的元素 2.事件名称:发送了什么方式的事件 3.事件处理程序:事件触发后要执行的代码(函数形式) 三.事件的使用方式 1.获取元素 ...
- RxJS——调度器(Scheduler)
调度器 什么是调度器?调度器是当开始订阅时,控制通知推送的.它由三个部分组成. 调度是数据结构.它知道怎样在优先级或其他标准去存储和排队运行的任务 调度器是一个执行上下文.它表示任务在何时何地执行(例 ...