Jump to content
Guilherme Teixeira

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

Recommended Posts

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}

Desde já muito obrigado.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By zuuzu
      Olá, estou desenvolvendo uma api para download de fotos/videos/gif, eu consegui fazer tudo certinho, mas na hora de gerar um link de download aleatório ele gera sempre o mesmo, só gera um link diferente se eu reiniciar o servidor, queria que gerasse um link diferente sempre que eu reiniciasse a página, sem precisar reiniciar o servidor. Tem como alguém me ajudar com isso? *A api está sendo desenvolvida para a automatização de download de fotos/videos/gif*

    • By Febatera7
      Preciso construir um microsserviço, apenas no lado do servidor (Node.js) que leia menções e comentários em postagens em que o @ do meu cliente foi marcado, em seguida, salve essas mensagens em nosso banco de dados, para especialistas de atendimento para responderem mais tarde.
      Este microsserviço também deve ser capaz de ler e salvar as fotos destas postagens e comentários.
      Para Node.js, vi que não há SDK, então procurei os terceiros que o próprio Facebook indica, mas não encontrei nada sobre ler e responder a menções e comentários em postagens.
      Tentei utilizar as bibliotecas fb e fbgraph, mas nenhuma delas me dá as opções para ler postagens em que fui marcado, apenas as do meu próprio feed.
      Alguém pode me ajudar? Por onde posso começar? Há alguma outra biblioteca que consiga utilizar?
    • By _marlon307
      Boa noite. Bom Dia.
      Estou com um problema com meu menu hover em React. quando eu passo o mouse em cima do elemnto para abrir o menu le renderiza todas as abas e quando passo o mouse sobre o menu ele fica bugado.
       
      import React, { useState } from 'react'; import { Link } from 'react-router-dom'; //import DropModMn from '../../Helper/DropModMn'; import { ReactComponent as Respponse } from '../../icons/respponse.svg'; import styles from '../css/search.module.css'; import SubMenuCtg from './SubMneu/SubMenuCtg';   const Search = () => {       const menu = [         {             nctg: 'Masculino',             ctg: ['Categoria', 'Categoria', 'Categoria 3', 'Categoria 4', 'Categoria 5'],         },         {             nctg: 'Femenino',             ctg: ['Categoria 3', 'Categoria 4', 'Categoria 5', 'Categoria 6', 'Categoria 7'],         },         {             nctg: 'Criança',             ctg: ['Categoria 8', 'Categoria 9', 'Categoria 10', 'Categoria 11', 'Categoria 12'],         },         {             nctg: 'Acessórios',             ctg: ['Categoria 13', 'Categoria 14', 'Categoria 15', 'Categoria 16', 'Categoria 17'],         },         {             nctg: 'Promoção',             ctg: ['Categoria 18', 'Categoria 19', 'Categoria 20', 'Categoria 21', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22'],         }       ];      const [expand, setExpand] = useState(false);       function MouseOver(event){         event.preventDefault();                  console.log(event);           if(expand) setExpand(!expand);         else setExpand(!expand);     }       return (           <nav className={styles.search}>               <div className={styles.ct}>                 <Link to="/" className={styles.index}>                     <Respponse aria-label="Respponse"/>                 </Link>               </div>               <div className={styles.ct}>                   <ul className={styles.ldep}>                       {menu.map((m) =>                                                  <li className={styles.ictg} key={m.nctg} onMouseOver={MouseOver} onMouseLeave={MouseOver}>                               <Link className={`${styles.lctg} imh`} to={m.nctg}>{m.nctg}</Link>                                                          <SubMenuCtg gl={m.ctg} exp={expand} />                                                    </li>                     )}                                      </ul>             </div>         </nav>     ) }   export default Search
    • By gugacdb
      Gostaria de uma ajuda com uma questão relacionada ao nodejs.
       
      Estou tentando salvar informações que recebo de um arquivo local json ao banco de dados.
       
      esse arquivo me traz varias objetos, e o que preciso fazer é salvar objeto por objeto exemplo:
       
      let pessoa = [ {nome : 'Fulano1' , sobrenome : 'Beltrano1', idade : 80} {nome : 'Fulano2' , sobrenome : 'Beltrano2', idade : 90} {nome : 'Fulano3' , sobrenome : 'Beltrano3', idade : 100} ]  
      Estou realizando um laço para salvar cada volta, pois preciso inferir uma data em cada objeto.

      Estou tentando salvar utilizado o:
       
      do{}while(i > contador) Código que estou tentando usar:
       
      setUm = async (req, res, next) => { fs.readFile('./public/assets/images/data_dragon/pt_br/data/set1-pt_br.json' , 'utf8' , function(err , data ){ if(err){ return console.log('erro ao ler o arquivo'); } let jsonData = JSON.parse(data); let counter = jsonData.length; let i = -1; do{ i = i + 1; let dataSave = { associatedCards : jsonData[i].assets, associatedCardRefs : jsonData[i].associatedCardRefs, assets : jsonData[i].assets, region : jsonData[i].region, egionRef : jsonData[i].regionRef, attack : jsonData[i].attack, cost : jsonData[i].cost, health : jsonData[i].health, description : jsonData[i].description, descriptionRaw : jsonData[i].descriptionRaw, levelupDescription : jsonData[i].levelupDescription, levelupDescriptionRaw : jsonData[i].levelupDescriptionRaw, flavorText : jsonData[i].flavorText, artistName : jsonData[i].artistName, name : jsonData[i].name, cardCode : jsonData[i].cardCode, keywords : jsonData[i].keywords, keywordRefs : jsonData[i].keywordRefs , spellSpeed : jsonData[i].spellSpeed, spellSpeedRef : jsonData[i].spellSpeedRef, rarity : jsonData[i].rarity, rarityRef : jsonData[i].rarityRef, subtype : jsonData[i].subtype, subtypes : jsonData[i].subtypes, supertype : jsonData[i].supertype, type : jsonData[i].type, collectible : jsonData[i].collectible, set : jsonData[i].set, } const infosave = new Infocard(dataSave); try{ infosave.save(); }catch (e) { console.error('ROLOU ALGO DE ERRADO: '+ e.message); } }while(i < counter); res.json(dataSave); }); }  Abaixo meu model:
       
      const Infocard = new mongoose.Schema( { associatedCards : [String], associatedCardRefs : [String], assets : [String], region : String, regionRef : String, attack : Number, cost : Number, health : Number, description : String, descriptionRaw : String, levelupDescription : String, levelupDescriptionRaw : String, flavorText : String, artistName : String, name : String, cardCode : String, keywords : [String], keywordRefs : [String], spellSpeed : String, spellSpeedRef : String, rarity : String, rarityRef : String, subtype : String, subtypes : [String], supertype : String, type : String, collectible : Boolean, set : String, },{ timestamps : {createdAt : 'created_at'} } );
       
      Porem não estou obtendo sucesso. Quando chamo
      res.json(jsonData) o json carrega normalmente no navegador com todas as informações, porém quando vou tentar salvar no banco de dados os itens chegam vazios

      Ideias são apreciadas.

      Obrigado!
    • By drx
      Olá Pessoal!
       
      Eu estou estudando NodeJS e estou tentando enviar email com o nodemailer.
      Porém ao declarar a constante, dá pau. Este é o erro:
       
      [nodemon] app crashed - waiting for file changes before starting...
       
      Como tenho controle total de leitura, escrita... não sei o que está ocasionando esse erro.
      Talvez possa ser alguma variável que não setei no sistema windows...
      Alguém teria uma solução?
       
      SO Windows10-Pro
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.