Dúvida sobre chamada async dentro do React + Material UI

Guilherme Teixeira · April 26

Olá pessoal tudo bem?

Sou iniciante em React + Material Ui no node.js

Quanto ao layout estou indo até que bem. Contudo, hoje me deparei com um problema.

Estou fazendo um formulário de login que irá verificar os dados em um BD Mysql.

Criei o formulário com hook form e na hora de submeter pretendo passar os dados do formulário por parametro em uma função, ela pesquisar no mysql e retornar o resultado.

Contudo, na hora que coloquei funções assincronas que tem Promisse no arquivo que irá conectar com o DB o seguinte erro aparece:

Unhandled Rejection (TypeError): Net.connect is not a function

Isso depois que coloquei os códigos para conectar o DB. Como faço para chamar funcões assincornas dentro React então? (a chamada está onde está comentado "Aqui chamo a função"

Segue o código:

import React, { useState } from 'react';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import FormControl from '@material-ui/core/FormControl';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import InputAdornment from '@material-ui/core/InputAdornment';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Lock from '@material-ui/icons/Lock';
import Button from '@material-ui/core/Button';
import { useForm } from "react-hook-form";
import Alert from '@material-ui/lab/Alert';


const useStyles = makeStyles((theme) => ({
  logotipo: {
    paddingTop: theme.spacing(6),
    backgroundColor: theme.palette.background.default,
    margin: '0 auto',
    boxShadow: 'none'

  },

  logotipoSegg: {
    margin: '0 auto',
    width: '30%'

  },
  centraliza: {
    textAlign: 'center',
    paddingTop: theme.spacing(4),
  },
  margin: {

    marginTop: theme.spacing(2),
    paddingRight: theme.spacing(2),
    paddingLeft: theme.spacing(2)
  },
  button: {
    marginTop: theme.spacing(4),
  }
}));

export default function Login() {
  const { register, handleSubmit,
    formState: { errors } } = useForm();
  const onSubmit = data => {


    console.log(data)
    document.getElementById('usuario').setAttribute('disabled', 'true')
    document.getElementById('senha').setAttribute('disabled', 'true')
    
    /*** Aqui chamo a função ******/
    const usuario = require('../config/Usuario')
    console.log(usuario.login)

  };

  const classes = useStyles();

  return (
    <>
      <Container maxWidth='lg'>
        <Grid
          container
          direction="row"
          justify="space-around"
          alignItems="flex-start"
        >
          <Grid item xs={12} sm={6} md={5} >
            <Card
              className={classes.logotipo}>
              <CardMedia
                component="img"
                alt='Logotipo Live Experience'
                image='/images/LogotipoLiveExperience.png'
                title='Logotipo Live Experience'
              />
            </Card>

            <Typography variant="h1" component="h1">Sistema de gestão para Restreaming</Typography>
            <Typography component="p" className={classes.centraliza}>Faça seu login para acessar o sistema</Typography>
            <form onSubmit={handleSubmit(onSubmit)}>
              <FormControl className={classes.margin} fullWidth>
                <InputLabel htmlFor="usuario">Digite seu usuário:</InputLabel>
                <Input
                  id="usuario"
                  {...register("usuario", { required: true })}
                  startAdornment={
                    <InputAdornment position="start">
                      <AccountCircle />
                    </InputAdornment>
                  }
                />
              </FormControl>
              {errors?.usuario?.type === "required" && <Alert severity="error">É necessário informar seu usuário acima!</Alert>}

              <FormControl className={classes.margin} fullWidth>
                <InputLabel htmlFor="senha">Digite sua senha:</InputLabel>
                <Input
                  id="senha"
                  type='password'
                  {...register("senha", { required: true })}
                  startAdornment={
                    <InputAdornment position="start">
                      <Lock />
                    </InputAdornment>
                  }
                />
              </FormControl>
              {errors?.senha?.type === "required" && <Alert severity="error">É necessário informar sua senha acima!</Alert>}
              <Button fullWidth variant="contained" color="primary" className={classes.button} type="submit">Acessar Sistema</Button>

            </form>
            <Typography component="p" className={classes.centraliza}><img src="/images/segg.png" alt='SEGG' className={classes.logotipoSegg} /></Typography>
          </Grid>

        </Grid>
      </Container>
    </>);

}

E este é começo do código do Mysql que comecei e na hora que coloquei a conexão deu o erro:

const mysql = require('mysql2')
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'xxxxxxx',
  database: 'liveexperience'
});


function login(dados) {

return ('Ok para ' + dados.usuario)

}


module.exports = {login}