Erro ao tentar utilizar useState - resolvido

Importo

import React, { 
  useMemo, 
  useRef, 
  useState 
} from 'react';

Mas se utilizo const [sumarioList, setSumarioList] = useState();, desta forma dá o erro e a tela fica em branco

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
react.development.js:88 Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

O que pode ser ?

Pode ser exatamente o que a mensagem diz, vc chamou um hook fora do corpo de uma função.

Vc pode mostrar o restante do código do arquivo em que isso acontece?

É que se vc estiver fazendo algo como o exemplo abaixo estaria certo:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// ou com classe
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

Mas assim, com a chamada fora da função, seria errado:

import React, { useState } from 'react';

const [count, setCount] = useState(0);

function Example() {
  /* ... */
}
3 curtidas

Obrigado era isso mesmo.

1 curtida