Reactjs 反应：身份验证问题

我想写一个网页，里面有一个登录表单。如果用户名和密码匹配，那么我们将进入另一个页面。否则，我们将重新加载到同一页面

import React, { Component } from "react";
import { Redirect } from "react-router-dom";

class Login extends Component {
  constructor(props) {
    super(props);
    let logged = false;
    this.state = {
      username: "",
      password: "",
      logged,

      box: {
        width: "300px",
        margin: "0 auto",
        border: "1px solid blue",
        textAlign: "center",
        verticalAlign: "middle",
        lineHeight: "20px",
        backgroundColor: "white",
      },

      body: {
        backgroundColor: "#ccffff",
        height: `100vh`,
        width: `100vw`,
        display: `flex`,
        alignItems: `center`,
        justifyItems: `center`,
      },
    };
    this.onChange = this.onChange.bind(this);
    this.submitForm = this.submitForm.bind(this);
  }

  onChange(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

  submitForm(e) {
    e.preventDefault();
    const { username, password } = this.state;
    this.verify();
  }

  verify() {
    if (this.state.username === "A" && this.state.password === "hello") {
      console.log("Accepted");
      this.setState({
        logged: true,
      });
    } else {
      console.log("Not accepted");
    }
  }

  getForm() {
    return (
      <form onSubmit={this.submitform}>
        <label for="username">First name:</label>
        <input
          type="text"
          placeholder="Username"
          name="username"
          size="20"
          value={this.state.username}
          style={{ width: "50%", height: "7%" }}
          onChange={this.onChange}
        />
        <br />
        <br />

        <label for="password">Password: </label>
        <input
          type="password"
          placeholder="Password"
          name="password"
          size="15"
          value={this.state.password}
          onChange={this.onChange}
        />
        <br />
        <br />
        <input type="submit"></input>
      </form>
    );
  }

  render() {
    if (this.state.logged) {
      return <Redirect to="/admin" />;
    }

    return (
      <div style={this.state.body}>
        <div style={this.state.box}>
          <br />
          <br />
          {this.getForm()}
          <br />
          <br />
        </div>
      </div>
    );
  }
}

export default Login;

import React，{Component}来自“React”；
从“react router dom”导入{Redirect}；
类登录扩展组件{
建造师（道具）{
超级（道具）；
let=false；
此.state={
用户名：“”，
密码：“”，
记录的，
方框：{
宽度：“300px”，
边距：“0自动”，
边框：“1px纯蓝”，
textAlign：“居中”，
垂直排列：“中间”，
线宽：“20px”，
背景颜色：“白色”，
},
正文：{
背景颜色：“ccffff”，
高度：`100vh`，
宽度：`100vw`，
显示：`flex`，
对齐项目：`center`，
justifyItems:`center`，
},
};
this.onChange=this.onChange.bind（this）；
this.submitForm=this.submitForm.bind（this）；
}
onChange（e）{
这是我的国家({
[e.target.name]：e.target.value，
});
}
提交表格（e）{
e、 预防默认值（）；
const{username，password}=this.state；
这个。验证（）；
}
验证（）{
if（this.state.username==“A”&&this.state.password==“hello”）{
控制台日志（“已接受”）；
这是我的国家({
是的，
});
}否则{
控制台日志（“不接受”）；
}
}
getForm（）{
返回(
名字：




密码：




);
}
render（）{
if（this.state.logged）{
返回；
}
返回(




{this.getForm（）}




);
}
}
导出默认登录；

---

前端部分一切正常。但就身份验证而言，控件甚至不会移动到verify（）。请帮助

您键入的此。提交表单方式错误。检查这个

 <form onSubmit={this.submitForm}>

---

天哪，是的。这似乎就是问题所在。现在我得到了以下信息：错误：不变量失败：您不应该在外部使用“我该怎么办？”@shankyyyyyyy，这可能适用于此.props.history.push（

/admin

）

verify() {

   console.log('Fired')


    if (this.state.username === "A" && this.state.password === "hello") {
      console.log("Accepted");
      this.setState({
        logged: true,
      });
    } else {
      console.log("Not accepted");
    }
  }