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 Ferdz-Agencia-Digital
      Estou importando o NavLink do react-router-dom e montando o meu menu assim:
       
      <Nav navbar>{createLinks(routes)}</Nav>  
      No arquivo routes.js estou montando enviando conforme código abaixo:
       
      var routes = [ { path: "/index", name: "Dashboard", icon: "ni ni-tv-2 text-primary", component: Index, tipo: 1, layout: "/admin", }, { path: "/solicitacoes-trabalho", name: "Solicitações", icon: "ni ni-cart text-orange", tipo: 1, component: Solicitacoes, layout: "/admin", }, { path: "/Clientes", name: "Clientes", icon: "ni ni-single-02 text-orange", tipo: 2, component: Clientes, layout: "/admin", }, ]; export default routes;  
      Há como na exibição eu conseguir filtrar pelo tipo e só mostrar o que for do tipo 1 ?
    • By Sapinn
      Opa galera, tudo blz? Recentemente comecei a estudar reactjs e para praticar estou fazendo o clone da Netiflix. Mas estou com um erro ao tentar chamar as imagens da API do TMDB o erro é: 
      TypeError: Cannot read properties of undefined (reading 'results')
       
      Já tentei refazer o código varias vezes mas não consegui resolver o problema. Vou postar o resto do código aqui
       
      App.js:
      import React, {useEffect, useState} from 'react'; import Tmdb from './Tmdb'; import MovieRow from './components/MovieRow'; const App = () =>{   const [movieList, setMovieList] = useState([]);   useEffect(()=>{     const loaddAll = async () =>{       let list = await Tmdb.getHomeList();       setMovieList(list)     }     loaddAll();   }, []);   return(       <div className="page">           <section className="lists">               {movieList.map((item, key)=>(                     <MovieRow key={key} title={item.title} items={item.items}/>               ))}                         </section>       </div>   ); } export default App; Consumir a api:
      Tmdb.js:
      const API_KEY = '******************************'; const API_BASE = 'https://api.themoviedb.org/3'; const basicFetch = async (endpoint) =>{     const req = await fetch(`${API_BASE}${endpoint}`)     const json = await req.json();     return json; } export default {     getHomeList: async () =>{         return [             {                 slug: 'originals',                 title: 'Originais da Netflix',                 items: await basicFetch(`/discover/tv?with_networks=213&language=pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'trending',                 title: 'Recomendados para você',                 item: await basicFetch(`/trending/all/week?language=pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'toprated',                 title: 'Em alta',                 item: await basicFetch(`/movie/top_rated?language=pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'action',                 title: 'Ação',                 item: await basicFetch(`/discover/movie?width_genres=28&language-pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'comedy',                 title: 'Comédia',                 item: await basicFetch(`/discover/movie?width_genres=35&language-pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'horror',                 title: 'Terror',                 item: await basicFetch(`/discover/movie?width_genres=27&language-pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'romance',                 title: 'Romance',                 item: await basicFetch(`/discover/movie?width_genres=10749&language-pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'documentary',                 title: 'Documentários',                 item: await basicFetch(`/discover/movie?width_genres=99&language-pt-BR&api_key=${API_KEY}`)             },                     ]     } }  
       
      Componente para mostrar os filmes:
      MovieRow.js:
      import React from "react"; import './MovieRow.css'; export default ({title, items}) =>{         return (         <div>             <h2>{title}</h2>             <div className="moviewRow--listarea">                 {items.results.length > 0 && items.results.map((key, item)=>(                     <img src={`https://image.tmdb.org/t/p/w300${item.poster_path}`} />                 ))}             </div>         </div>     ); }  
      Se alguém pudesse me ajudar eu ficaria muito grato.
    • By samirsauma
      Bom dia pessoal tudo bom? espero que sim.
      Então eu estou buscando conhecimento em uma questão envolvendo a logica por trás da programação de uma exchange de criptmoedas.
      eu estou tentando entender como que funciona toda questão interna de uma exchange.
       
      Vamos la.
      estou em um momento de bloqueio, se você puder me auxiliar com a logica e entender melhor, eu agradeço.
      se você se interessa por projetos blockchain, entre em contato comigo.
      e se você tiver algum link voltado para esse assunto, mesmo que seja em koreano eu estou aceitando. 
      obrigado, grato pela sua atenção.
    • 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?
×

Important Information

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