[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"

最新文章

热门文章