zoukankan      html  css  js  c++  java
  • [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} />
  • 相关阅读:
    模拟登录
    服务器的
    多线程爬虫
    新浪微博
    。。
    ** turtle模块和random模块
    收藏链接python--向大神学习
    126邮箱发送邮件测试1
    LabVIEW版本控制(转)
    正交编码器单端转差分
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12030392.html
Copyright © 2011-2022 走看看