我是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;