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"的更多相关文章

  1. React报错之Rendered more hooks than during the previous render

    正文从这开始~ 总览 当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时,会产生"Rendered more hooks than during the previous render ...

  2. react之react Hooks

    函数组件,没有 class 组件中的 componentDidMount.componentDidUpdate 等生命周期方法,也没有 State,但这些可以通过 React Hook 实现. Rea ...

  3. [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 ...

  4. [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 ...

  5. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  6. JavaScript 和 React,React用了大量语法糖,让JS编写更方便。

    https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0 ...

  7. [React] Understand React.Children Utilities

    The data contained in this.props.children is not always what you might expect. React provides React. ...

  8. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  9. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

随机推荐

  1. 【转】Mac入门(一)基本用法

    我前五年一直外包到微软,每天使用的都是Windows系统和.NET. 2012年加入VMware,  公司的工作机是台Mac 笔记本(MacBook Pro), 所以有机会接触Mac系统 Mac和Wi ...

  2. ORA-01779: 无法修改与非键值保存表对应的列

    项目中通过子查询更新数据时遇到ORA-01779: 无法修改与非键值保存表对应的列,模拟过程如下: 1.创建测试表 CREATE TABLE tt1 (ID INT,col1 VARCHAR2()); ...

  3. 示例:WPF实现ApplicationCommands.Delete的TextBox

    原文:示例:WPF实现ApplicationCommands.Delete的TextBox 目的:通过模仿TextBox中Ctrl+C等快捷键原理来了解CommandBindings实现原理,可以通过 ...

  4. Java Mockito 笔记

    Mockito 1 Overview 2 Maven 项目初始化 3 示例 3.1 第一个示例 3.2 自动 Mock 3.3 Mock 返回值 3.4 Mock 参数 3.5 自动注入 Mock 对 ...

  5. https相关知识总结

    从园子里看到很多讲解不错的文章,将链接放到这里,备忘 浅析数字证书:https://www.cnblogs.com/hyddd/archive/2009/01/07/1371292.html

  6. Python基础之datetime、sys模块

    1.datetime模块 1)datetime.datetime.now(),返回各当前时间.日期类型. datetime.datetime.now(),返回当前日期. import datetime ...

  7. 安装fastnlp

    直接 pip install fastnlp 如果出现 torch的安装报错,可能与操作系统及 CUDA 的版本相关.直接上pytorch 的官网 https://pytorch.org/get-st ...

  8. ip2region.jar实现ip转地址

    ip转地址 根据ip地址查询出所在地址. GitHub地址 https://github.com/lionsoul2014/ip2region/ pom坐标 <dependency> &l ...

  9. JavaScript 事件(基础)

    一.事件 事件:触发-响应机制. 二.事件三要素 1.事件源:触发事件的元素 2.事件名称:发送了什么方式的事件 3.事件处理程序:事件触发后要执行的代码(函数形式) 三.事件的使用方式 1.获取元素 ...

  10. RxJS——调度器(Scheduler)

    调度器 什么是调度器?调度器是当开始订阅时,控制通知推送的.它由三个部分组成. 调度是数据结构.它知道怎样在优先级或其他标准去存储和排队运行的任务 调度器是一个执行上下文.它表示任务在何时何地执行(例 ...