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

我是React的新手，我想做一个积垢。

中的表单工作正常。接下来，我通过

类App扩展组件{render（）{

交换了

函数App（）

，并编写了处理Facebook身份验证的代码。它编译得很好，终端上没有错误

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

作为一个彻头彻尾的傻瓜，我所做的ḿ 做错了什么

非常感谢

下面是我的密码

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

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;

import React，{useState，Component}来自'React'；
从“./services/api”导入api；
导入“/App.css”；
从“/assets/logotipo.png”导入logotipo；
从“反应facebook登录”导入FacebookLogin；
类应用程序扩展组件{
render（）{
const responseFacebook=（response）=>{
}
常数[nome，setNome]=使用状态（“”）；
常数[ra，setRa]=useState（“”）；
const[telefone，setTelefone]=使用状态（“”）；
const[email，setEmail]=useState（“”）；
const[senha，setSenha]=useState（“”）；
异步函数ProcessAsSubmit（事件）{
event.preventDefault（）；
const response=wait api.post（“/users”{
诺姆：诺姆，
拉：拉，
telefone:telefone，
电邮:电邮,，
森哈：森哈，
})
console.log（响应）
}
返回(
使用FACEBOOK和GOOGLE登录
Bem vindes aoTextos CAPed系统

Usar登录Facebook

Ou faça o cadastro手册

诺姆
setNome（event.target.value）}
>
类风湿关节炎
setRa（event.target.value）}
>
电传
setTelefone（event.target.value）}
>
电子邮件
setEmail（event.target.value）}
>
森哈
setSenha（event.target.value）}
>

法泽·梅乌·卡达斯特罗

Játem cadastro mas não lembre a senha？集团bemaqui
);
};
}
导出默认应用程序；

要使用钩子，必须实现函数组件。以下内容应该可以帮助您开始。本质上，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;

---

基本上你不能在类中使用钩子。。。你必须使用一个函数……事实上，我需要理解“App=（）”`:-）背后的逻辑