Javascript React Typescript登录不'；不发送请求，但重新呈现主组件

我的反应有问题。在我按下登录按钮后，连接到按钮的函数的axios调用有时会将请求发送到后端（测试以查看是否是spring的问题，但postman每次都能完美地工作），但从前端发送时并不总是到达后端。此外，在前面，它在URL中重新呈现并显示引入的名称和密码。 你知道为什么吗？另外，如果我坚持调用一段时间，它会神奇地改变前端的url，并在后端正确显示。我的承诺有一个转折点，但从未达到。 下面是我的前端App.tsx、Login.tsx和Doctor.tsx

Login.tsx

import React from 'react';
import './App.css';
import Login from './components/Login';
import CssBaseline from "@material-ui/core/CssBaseline";
import {Route, Switch} from "react-router";
import DoctorMainPage from './components/Doctor';
import {BrowserRouter} from "react-router-dom";


const App: React.FC = () => {
  return (
          <>
                  <BrowserRouter>
                      <Switch>
                          <Route exact path = "/" component={Login}/>
                          <Route exact path = "/doctor" component={DoctorMainPage}/>
                      </Switch>
                  </BrowserRouter>
          </>

  );
};

export default App;

Login.tsx
从“React”导入React；
导入“/App.css”；
从“./components/Login”导入登录名；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“反应路由器”导入{Route，Switch}；
从“./components/Doctor”导入DoctorMainPage；
从“react router dom”导入{BrowserRouter}；
常量应用程序：React.FC=（）=>{
返回(
);
};
导出默认应用程序；

Login.tsx
从“React”导入React，{useffect，useState}；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/icons/LockOutlinedIcon”导入LockOutlinedIcon；
从“@material ui/core/Typography”导入排版；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Container”导入容器；
从“@material ui/core”导入{Paper}”；
从“使用反应路由器”导入useRouter；
从“./存储/状态”导入appState；
从“./actions/actions”导入操作；
从“axios”导入axios；
从“mobx react”导入{observer}；
const useStyles=makeStyles（主题=>({
“@global”：{
正文：{
背景色：theme.palette.common.white，
},
},
论文：{
marginTop：主题。间距（8），
显示：“flex”，
flexDirection:'列'，
对齐项目：“居中”，
},
化身：{
边距：主题。间距（1），
背景色：theme.palete.secondary.main，
},
表格：{
宽度：“100%”，//修复IE 11问题。
marginTop：主题。间距（1），
},
提交：{
边距：主题。间距（3,0,2）
},
}));
常量符号=（函数符号（）{
useffect（（）=>
{
设置密码（“”）；
setUsername（“”）；
},
[]
);
调试器；
常量登录=（）=>{
调试器；
axios.post（“http://localhost:8080/login", {
用户名：用户名，
密码：密码
})。然后（（响应）=>{
调试器；
console.log（response.data）；
病史推送（“/医生”）；
});
};
const{history，location，match}=useRouter（）；
const classes=useStyles（）；
const[username，setUsername]=useState（“”）；
const[password，setPassword]=useState（“”）；
常量isValid=（）=>{
返回username.length>0&&password.length>0
};
返回(
发生这种情况是因为提交了
Login.tsx
文件中定义的表单

Html表单是在web应用程序中触发请求的另一种较旧的方式。与AJAX调用（如您尝试使用axios进行的调用）不同，表单提交会导致浏览器加载新页面，因此所有JS上下文都会丢失

Html表单有一个
操作
，它是执行请求的URL，还有一个
方法
，它是用于执行请求的HTTP方法。
操作
默认为当前URL，
方法
默认为
获取
（也可以是
发布
）

这些表单可用于随请求发送数据。这些值取自
表单
标记内的输入字段。通过
获取
表单提交，数据通过URL参数发送。每个参数名称取自每个包含的输入字段的
名称
属性

所有这些都解释了为什么你的应用程序在单击按钮时会重新加载页面，因为表单已提交，导致在/URL上发出GET请求，URL中包含用户名和密码参数。不会触发
onClick
事件，因此不会调用
login
函数，因为页面正在重新加载（因此JS上下文消失了）

要防止出现这种情况，只需将按钮类型从
submit
更改为
button
，或者对
onClick
事件中接收到的事件对象进行调用。
发生这种情况是因为提交了
Login.tsx
文件中定义的表单

Html表单是在web应用程序中触发请求的另一种较旧的方式。与AJAX调用（如您尝试使用axios进行的调用）不同，表单提交会导致浏览器加载新页面，因此所有JS上下文都会丢失

Html表单有一个
操作
，它是执行请求的URL，还有一个
方法
，它是用于执行请求的HTTP方法。
操作
默认为当前URL，
方法
默认为
获取
（也可以是
发布
）

这些表单可用于随请求发送数据。这些值取自
表单
标记内的输入字段。通过
获取
表单提交，数据通过URL参数发送。每个参数名称取自每个包含的输入字段的
名称
属性

全t
Login.tsx

import React, {useEffect, useState} from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import {Paper} from "@material-ui/core";
import useRouter from "use-react-router";
import appState from "../store/state";
import actions from "../actions/actions";
import axios from 'axios';
import {observer} from "mobx-react";


const useStyles = makeStyles(theme => ({
    '@global': {
        body: {
            backgroundColor: theme.palette.common.white,
        },
    },
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main,
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(3, 0, 2)
    },
}));

const SignIn = (function SignIn() {

    useEffect(() =>
        {
            setPassword("");
            setUsername("");
        },
        []
    );

    debugger;
    const login = () => {
        debugger;
      axios.post("http://localhost:8080/login", {
          username: username,
          password: password
      }).then((response) => {
          debugger;
          console.log(response.data);
          history.push("/doctor");
      });
    };

    const {history, location, match} = useRouter();
    const classes = useStyles();
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const isValid = () => {
        return username.length > 0 && password.length > 0
    };
    return (
        <>


            <Container component="main" maxWidth="xs">

                <Paper className={classes.paper}>
                    <Avatar className={classes.avatar}>
                        <LockOutlinedIcon />
                    </Avatar>
                    <Typography component="h1" variant="h5">
                        Sign in
                    </Typography>
                    <form className={classes.form} noValidate>
                        <TextField onChange={(e) => setUsername(e.target.value)}
                                   variant="outlined"
                                   margin="normal"
                                   required
                                   fullWidth
                                   id="username"
                                   label="Username"
                                   name="username"
                                   autoComplete="username"
                                   autoFocus
                        />
                        <TextField onChange={(e) => setPassword(e.target.value)}
                                   variant="outlined"
                                   margin="normal"
                                   required
                                   fullWidth
                                   name="password"
                                   label="Password"
                                   type="password"
                                   id="password"
                                   autoComplete="current-password"
                        />
                        <FormControlLabel
                            control={<Checkbox value="remember" color="primary" />}
                            label="Remember me"
                        />
                        <Button disabled={!isValid()} onClick={() => login()}
                                type="submit"
                                fullWidth
                                variant="contained"
                                color="primary"
                                className={classes.submit}
                        >
                            Sign In
                        </Button>
                    </form>
                </Paper>
            </Container>

        </>

    );
});

export default SignIn;

Doctor.tsx


import AppBarWithMenu from './AppBarWithMenu';
import {Paper} from "@material-ui/core";
import * as React from "react";
import PacientsTable from './Table';
import appState from "../store/state";
import {observer} from "mobx-react";
import Button from "@material-ui/core/Button";
import useRouter from "use-react-router";
import {useEffect} from "react";
import useReactRouter from 'use-react-router';

const DoctorMainPage = observer(function DoctorMainPage(){

    const {history, location, match} = useReactRouter();

    return (
        <Paper>
            <AppBarWithMenu/>
            <PacientsTable/>
            <Button onClick={() => history.push("/")}>
                Logout
            </Button>
        </Paper>
    );
});

export default DoctorMainPage;