我的react.js应用程序出现创建错误

时间:2020-06-17 01:21:57

标签: javascript reactjs material-ui

我是React.js和material-ui的新手。我正在尝试制作一个简单的注册表格,但出现错误。我已经对失眠症的后端进行了测试,并且其所有路由都可以正常工作,因此我认为我的错误就在眼前。我的注册脚本是下面的这个。顺便说一句,我的错误仅表示这是一个创建错误。你们可以帮我吗?

import React from 'react';
import { style } from './styles';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import { useState } from "react";
import api from "../../services/api"

function Cadastro() {

  const classes = style();

  const [nome, setNome] = useState("");
  const [email, setEmail] = useState("");
  const [cpf, setCpf] = useState("");
  const [senha, setSenha] = useState("");
  const [rg, setRg] = useState("");
  const [data_nascimento, setDataNascimento] = useState("");

  async function save(){

    try{
      await api.post('/cadastro', {
        nome,
        cpf,
        email,
        rg,
        data_nascimento,
        senha
      })
    }catch(err){
      console.log(err)
    }
  }



  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Cadastro
        </Typography>
        <form className={classes.form} noValidate>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <TextField
                // value={nome}
                required
                fullWidth
                id="nome"
                label="Nome"
                onChange={e => setNome(e.target.value)}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                required
                fullWidth
                id="cpf"
                label="CPF"
                // value={cpf}
                onChange={e => setCpf(e.target.value)}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                id="email"
                label="Email"
                // value={email}
                onChange={e => setEmail(e.target.value)}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                // value={senha}
                label="Senha"
                type="password"
                id="senha"
                onChange={e => setSenha(e.target.value)}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                // value={rg}
                label="RG"
                id="rg"
                onChange={e => setRg(e.target.value)}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                // value={data_nascimento}
                type="date"
                id="data_nascimento"
                onChange={e => setDataNascimento(e.target.value)}
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={save}
          >
            Cadastrar
          </Button>

        </form>
      </div>

    </Container>
  );
}

export default Cadastro;

编辑1: 我的错误:

Error: "Request aborted"
    createError createError.js:16
    handleAbort xhr.js:73
    index.js:36

The development server has disconnected.
Refresh the page if necessary. webpackHotDevClient.js:76

[HMR] Waiting for update signal from WDS... log.js:24

索引文件是上面的代码。

现在,我的api脚本如下:

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:5000'
});

export default api;

0 个答案:

没有答案