Я новичок в 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;