Ir para conteúdo
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por belann
      Olá!
       
      Estou usando o editor quill em uma página html, sem fazer a instalação com npm, mas usando as api´s via internet com http, no entanto não consigo fazer a tecla enter funcionar para mudança de linha, tentei essa configuração abaixo, mas não funcionou.
       
      modules: {       syntax: true,       toolbar: '#toolbar-container',       keyboard: {         bindings: {           enter: {             key: 13,             handler: function(range, context) {                       quill.formatLine(range.index, range.length, { 'align': '' });             }           }  
       
    • Por belann
      Olá!
       
      Estou tentando iniciar uma Api de rotas no nodejs é da o seguinte erro:
      C:\Users\arifu\ntask-api\node_modules\consign\lib\consign.js:121
      /**
            ^
      Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\l\ntask-api\models\tasks.js from C:\Users\arifu\ntask-api\node_modules\consign\lib\consign.js not supported.
      tasks.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
      Instead either rename tasks.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\l\ntask-api\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
          at Object.newLoader [as .js] (C:\Users\l\ntask-api\node_modules\pirates\lib\index.js:121:7)
          at Consign.into (C:\Users\l\ntask-api\node_modules\consign\lib\consign.js:231:15)
          at file:///C:/Users/l/ntask-api/index.js:11:3 {
        code: 'ERR_REQUIRE_ESM'
       
      Ja troquei type: module para type: commonjs e dá outros erros como na importação do express.
      package.json
       
      {   "name": "ntask-api",   "version": "1.0.0",   "description": "API de gestão de tarefas",   "main": "index.js",   "type": "module",   "scripts": {     "start": "babel-node index.js"   },   "author": "l",   "dependencies": {     "@babel/cli": "^7.0.0",     "@babel/core": "^7.0.0",     "@babel/preset-env": "^7.0.0",     "consign": "^0.1.2",     "express": "^4.18.2"   },   "devDependencies": {     "@babel/core": "^7.0.0",     "@babel/node": "^7.0.0",     "@babel/preset-env": "^7.23.3"   } }  
      index.js
      import express from 'express'; import consign from 'consign';   const app = express();   consign()  .include("models")  .then("libs/middlewares.js")  .then("routes")  .then("libs/boot.js")  .into(app);
    • Por belann
      Olá! 
      Não consigo iniciar um programa usando nodejs, babel e express
      npm start
      > nt-api@1.0.0 start
      > babel-node index.js
      C:\Users\ar\nt-api\node_modules\babel-core\lib\transformation\file\options\option-manager.js:328
              throw e;
              ^
      Error: Couldn't find preset "@babel/env" relative to directory "C:\\Users\\ar\\nt-api"
          at C:\Users\ar\nt-api\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
          at Array.map (<anonymous>)
          at OptionManager.resolvePresets (C:\Users\ar\nt-api\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
          at OptionManager.mergePresets (C:\Users\ar\nt-api\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
          at OptionManager.mergeOptions (C:\Users\ar\nt-api\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
          at OptionManager.init (C:\Users\ar\nt-api\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
          at compile (C:\Users\ar\nt-api\node_modules\babel-register\lib\node.js:103:45)
          at loader (C:\Users\ar\nt-api\node_modules\babel-register\lib\node.js:144:14)
          at Object.require.extensions.<computed> [as .js] (C:\Users\ar\nt-api\node_modules\babel-register\lib\node.js:154:7)
          at Module.load (node:internal/modules/cjs/loader:1207:32)
      Node.js v21.2.0
    • Por Alkindar33
      Ultimamente tenho ficado em dúvida sobre o futuro das linguagens em relação a mercado de trabalho, eu trabalho atualmente com NodeJS mas sinto que a linguagem está se reproduzindo como coelho em termos de desenvolvedores aprendendo ela e por causa da lei de oferta do mercado tende a se pagar menos e etc e não estou muito contente com a linguagem em si. Mas tenho dúvida de qual linguagem escolher para conseguir melhores salários e qual deve crescer mais a longo prazo. Linguagens que eu vi para Web: Go, Elixir, Ruby e Rust.
      Alguém tem alguma ideia de qual pode ser uma boa linguagem para focar o aprendizado?
    • Por Algorithm
      Olá a todos
       
      Eu estou codificando um exemplo de uso do GraphQL com Nodejs, mas eu estou recebendo um erro de syntax relacionado a [ : ] [ Dois Pontos ], mas eu comparei meu codigo, com o da documentação oficial e esta tudo certo. Será que alguem, conseguiria achar o erro ?
       
      OBS: Esta incluso neste post [ Exemplo Documentação, Meu Exemplo, Mensagem de Erro, Código Completo ]
       
      Exemplo Documentação
      module.exports = /* GraphQL */ ` type Client { id: ID! name: String age: Int products: [Product] } type Query { clients: [Client] client(id: ID!): Client } type Mutation { addClient(name: String!, age: Int!): Client } `  
      Meu Exemplo
      const typeDefs = ` type Pessoa { _id: ID _codigo: Float _nome: String _idade: Int _email: String } input inputPessoa { _codigo: Float _nome: String _idade: Int _email: String } type Query { resposta: String saudacao(nome: String!): String findPessoaOne(codigo: Float): Pessoa findPessoa(input: inputPessoas): [Pessoa] } type Mutation { insertPessoa(input: inputPessoa): Pessoa updatePessoa(codigo: Float, input: inputPessoa) Pessoa deletePessoa(codigo: Float) [Pessoa] } `;  
      Mensagem de Erro
      C:\Users\Core\node\node_modules\graphql\language\parser.js:1413 throw (0, _syntaxError.syntaxError)( ^ GraphQLError: Syntax Error: Expected ":", found Name "Pessoa". at syntaxError (C:\Users\Core\node\node_modules\graphql\error\syntaxError.js:15:10) at Parser.expectToken (C:\Users\Core\node\node_modules\graphql\language\parser.js:1413:40) at Parser.parseFieldDefinition (C:\Users\Core\node\node_modules\graphql\language\parser.js:847:10) at Parser.optionalMany (C:\Users\Core\node\node_modules\graphql\language\parser.js:1510:28) at Parser.parseFieldsDefinition (C:\Users\Core\node\node_modules\graphql\language\parser.js:831:17) at Parser.parseObjectTypeDefinition (C:\Users\Core\node\node_modules\graphql\language\parser.js:803:25) at Parser.parseDefinition (C:\Users\Core\node\node_modules\node_modules\graphql\language\phql\language\parser.js:171:23) at Parser.many (C:\Users\Core\node\node_modules\graphql\language\parser.js:1529:26) at Parser.parseDocument (C:\Users\Core\node\node_modules\graphql\language\parser.js:121:25) at parse (C:\Users\Core\node\node_modules\graphql\language\parser.js:32:17) { path: undefined, locations: [ { line: 26, column: 57 } ], extensions: [Object: null prototype] {} }  
      Codigo Completo
      // Requires const express = require('express'); const GraphQL_HTTP = require('express-graphql'); const { mergeSchemas } = require('@graphql-tools/schema'); // Run // const connect = MongoClient.connect(''); const app = express(); const getCode = () => { return 10 }; // GraphQL Definitions || Query and Mutation const typeDefs = ` type Pessoa { _id: ID _codigo: Float _nome: String _idade: Int _email: String } input inputPessoa { _codigo: Float _nome: String _idade: Int _email: String } type Query { resposta: String saudacao(nome: String!): String findPessoaOne(codigo: Float): Pessoa findPessoa(input: inputPessoas): [Pessoa] } type Mutation { insertPessoa(input: inputPessoa): Pessoa updatePessoa(codigo: Float, input: inputPessoa) Pessoa deletePessoa(codigo: Float) [Pessoa] } `; // Functions const resolvers = { Query: { resposta: function() { return `GraphQL Conectado com Sucesso...`; }, saudacao: function(_, args) { return `Olá ${args.nome}! Seja Muito Bem Vindo(a) a GraphQL!!!! ` }, findPessoaOne: function(_, args) { return db.collection('GraphQL-Pessoa').findOne({codigo: args.codigo}) .then((result) => { return result; }); }, findPessoa: function(_, args) { return db.collection(`GraphQL-Pessoa`).find(args.input).toArray() .then((result) => { return result; }); }, Mutation: { insertPessoa: function(_, args) { args.input.codigo = getCode(); return db.collection(`GraphQL-Pessoa`).insertOne(args.input) .then((result) => { return result.ops[0]; }); }, updatePessoa: function(_, args) { return db.collection('GraphQL-Pessoa').updateOne({codigo: args.codigo}, {$set: args.input}) .then((result) => { if(result.result.n > 0) return `Registro Alterado com Sucesso!`; else return `Ocorreu um erro ao alterar o registro`; }); }, deletePessoa: function(_, args) { return db.collection(`GraphQL-Pessoa`).deleteOne({codigo: args.codigo}) .then((result) => { if(result.result.n > 0) return `Registro Deletado com Sucesso!`; else return `Ocorreu um erro ao deletar o registro`; }); } } } }; const schema = mergeSchemas({ typeDefs: typeDefs, resolvers: resolvers }) // Listen app.listen(3005, () => { console.log(`Servidor Rodando na Porta 3005`); })  
       
      Obrigado
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.