错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

Question

我是 React 的新手，我正在尝试制作 CRUD。 <div className="conteudo"> 中的表单运行良好。接下来，我将function App() 替换为class App extends Component { render() {，并编写了处理Facebook auth 的代码。它编译得很好，在终端上没有错误。

但在浏览器中，它向我显示了（臭名昭著的）消息“错误：无效的钩子调用。只能在函数组件的主体内部调用钩子。”

作为一个完全的菜鸟，我做错了什么？

非常感谢！

下面是我的代码...

================================================ ========

import React, { useState, Component } from 'react';
import api from './services/api';
import './App.css';
import logotipo from './assets/logotipo.png';
import FacebookLogin from 'react-facebook-login';

class App extends Component  {
  render() {

    const responseFacebook = (response) => {
    }

    const [nome, setNome] = useState('');
    const [ra, setRa] = useState('');
    const [telefone, setTelefone] = useState('');
    const [email, setEmail] = useState('');
    const [senha, setSenha] = useState('');

    async function processaSubmit (event) {
      event.preventDefault();

      const response =  await api.post('/users', {
        nome: nome,
        ra: ra,
        telefone: telefone,
        email: email,
        senha: senha,
      })

      console.log(response)
    }

    return (
      <div className="contenedor">

        <img src={logotipo} alt="Um logotipo qualquer" />

        <div className="App">
        <h1>LOGIN WITH FACEBOOK AND GOOGLE</h1>

        <FacebookLogin
          appId="381163456103277" //APP ID NOT CREATED YET
          fields="name,email,picture"
          callback={responseFacebook}
        />

        </div>

        <div className="conteudo">
          <p className="big">Bem vindes ao <strong>Sistema de Textos CAPed</strong>. <br />Faça seu cadastro para aproveitar o nosso <strong>acervo</strong>.</p>

          <button className="btn" type="Submit">Usar login do Facebook</button>

          <p className="big"></p>
          <p className="big">Ou faça o cadastro <strong>manualmente</strong> preenchendo o formulário abaixo.</p>

          <form onSubmit={processaSubmit}>

            <label htmlFor="Nome">Nome</label>
            <input 
              type="txt" 
              id="nome" 
              placeholder="Nome e sobrenome, pfvr"
              value={nome}
              onChange={event => setNome(event.target.value)}
            >
            </input>

            <label htmlFor="Ra">RA</label>
            <input 
              type="txt" 
              id="ra" 
              placeholder="Seu RA"
              value={ra}
              onChange={event => setRa(event.target.value)}
            >
            </input>

            <label htmlFor="telefone">Telefone</label>
            <input 
              type="tnumber" 
              id="telefone" 
              placeholder="Podemos precisar ;-)"
              value={telefone}
              onChange={event => setTelefone(event.target.value)}
            >
            </input>

            <label htmlFor="email">Email</label>
            <input 
              type="email" 
              id="email" 
              placeholder="Digite seu melhor email"
              value={email}
              onChange={event => setEmail(event.target.value)}
            >
            </input>

            <label htmlFor="senha">Senha</label>
            <input 
              type="password" 
              id="senha" 
              placeholder="Digite uma senha bacana"
              value={senha}
              onChange={event => setSenha(event.target.value)}
            >
            </input>

            <p className="little">&nbsp;</p>

            <button className="btn" type="Submit">Fazer meu cadastro</button>

          </form>

          <p className="little"></p>
          <p className="little">Já tem cadastro mas não lembre a senha? Clique bem <strong>aqui</strong>.</p>

        </div>

      </div>
    );
  };
}

export default App;

Answer 1

要使用钩子，你必须实现一个函数组件。以下内容应该可以帮助您入门。本质上，您的 JSX 不是使用 render 方法，而是从函数返回。

import React, { useState } from 'react';
import api from './services/api';
import './App.css';
import logotipo from './assets/logotipo.png';
import FacebookLogin from 'react-facebook-login';

const App = () => {
  const responseFacebook = (response) => {}
  const [nome, setNome] = useState('');
  const [ra, setRa] = useState('');
  const [telefone, setTelefone] = useState('');
  const [email, setEmail] = useState('');
  const [senha, setSenha] = useState('');

  async function processaSubmit (event) {
    event.preventDefault();
    const response =  await api.post('/users', {
      nome: nome,
      ra: ra,
      telefone: telefone,
      email: email,
      senha: senha,
    })

    console.log(response)
  }

  return ( ... )
}

export default App;