Erro ao tentar utilizar useState - resolvido

Q: Erro ao tentar utilizar useState - resolvido

guilhermebhte: 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] = us

30 de agosto de 2019 2 respostas Resolvido

guilhermebhte 30 de agosto de 2019

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:

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

O que pode ser ?

2 Respostas

Solucao aceita

wldomiciano 30 de ago. de 2019 3 likes

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() {
  /* ... */
}

guilhermebhte 31 de ago. de 2019 1 like

Obrigado era isso mesmo.

Criado 30 de agosto de 2019

Ultima resposta 31 de ago. de 2019

Respostas 2

Participantes 2

2 Respostas

Topicos relacionados