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. c++作业题sin公式

    今日 有一位同样读大一的朋友向我求助有关c++的作业题 他说他的程序逻辑正确 但是结果的精度不对 题目如下: 这是一道看起来十分简单的作业题 我按照要求快速地写了一个版本 不出所料 一样遇到了精度问题 ...

  2. [终极巨坑]golang+vue开发日记【三】,登陆界面制作(二)

    写在前面 本期内容是承接上期已经做好了登陆界面来写的,不过本期是以golang为主,可能需要大家把最基本的语法结构熟悉一下:菜鸟教程.这样的话方便展开,自然而然的,本篇也是直接实战为主.这次需要依赖m ...

  3. linux 1-常用命令

    文件处理命令: 命令格式:命令 [-选项] [参数] 例如:ls -la /etc   多个选项可以写在一起,不区分前后关系,例如 -l 和 -a 一起写成 -la 目录处理命令:ls (就是list ...

  4. NOI2019网络同步赛游记

    我发的邮件**f没收到,后来去专门询问才整到一个名额(估计是嫌我太菜,参加了也是垫底) day -1 上午写了到类似随机游走的高斯消元期望dp,然后颓颓颓 下午打洛咕月赛.T1一直50pts,后来才知 ...

  5. FusionInsight大数据开发---SparkStreaming概述

    SparkStreaming概述 SparkStreaming是Spark核心API的一个扩展,它对实时流式数据的处理具有可扩展性.高吞吐量.可容错性等特点. SparkStreaming原理 Spa ...

  6. ES7.3.0配置

    # elasticsearch.yml cluster.name: my-application node.name: node-1 node.master: true node.ingest: tr ...

  7. c# winform结合数据库动态生成treeview的父节点和子节点方法和思路

    tb_food表的结构如图一: tb_foodtype表的结构如图二: //获取tb_foodtype表中的所有数据 private void InitDataTable() { SqlConnect ...

  8. Beego 学习笔记14:Session控制

    Session控制 1>     Session常用来作为全局变量使用,比如记录当前登录的用户,或者页面之间传递数据使用. 2>     Beego框架内置了 session 模块,目前 ...

  9. 转 根据CPU核心数确定线程池并发线程数

    转自: https://www.cnblogs.com/dennyzhangdd/p/6909771.html?utm_source=itdadao&utm_medium=referral 目 ...

  10. MySQL添加用户、为用户分配权限

    登录MySQL登录本地用户 mysql -u root -p登录外网用户(需要注意服务器可能只允许本地登录,需要修改响应的配置文件) mysql -u zhrt -h 10.64.6.4 -p添加用户 ...