Reactjs 第二次登录

我正在建立一个登录，只是练习，所以问题是当我用正确的信息点击登录时，第一次它什么都不做，第二次它只登录。我认为问题在于数据首先存储在状态中，然后验证并继续到下一页 . 当信息错误时，它会第一次给出错误消息，但当我登录时，它只会在第二次尝试时登录

import { Link } from 'react-router-dom';
class Index extends Component {
  state = {
    errorMessage: false,
    isValueCorrect: false,
    info: {
      email: '',
      password: ''
    },
    login: {
      email: 'Email@gmail.com',
      password: '1234'
    }
  };

  updateInfo = e => {
    this.setState({
      info: { ...this.state.login, [e.target.name]: e.target.value }
    });
  };
  submit = e => {
    e.preventDefault();
    if (
      this.state.info.email === this.state.login.email &&
      this.state.info.password === this.state.login.password
    ) {
      this.setState({ isValueCorrect: true });
    } else {
      this.setState({ errorMessage: true });
    }
  };

  render() {
    return (
      <div className="text-center container mt-4" style={{ width: '50%' }}>
        <form className="px-4 py-3" onSubmit={this.submit}>
          <div className="form-group">
            {this.state.errorMessage === true ? (
              <p className="text-danger">The email or the password is wrong</p>
            ) : null}
            <label>Email: </label>
            <input
              type="text"
              placeholder="Email@example.com"
              className="form-control"
              name="email"
              value={this.state.info.email}
              onChange={this.updateInfo}
            />
          </div>
          <div className="form-group">
            <label>Password: </label>
            <input
              type="text"
              placeholder="Password"
              className="form-control"
              name="password"
              value={this.state.info.password}
              onChange={this.updateInfo}
            />
          </div>
          {this.state.isValueCorrect === true ? (
            <Link to="Profile">
              <button type="submit" className="btn btn-secondary mt-3">
                Log in
              </button>
            </Link>
          ) : (
            <button type="submit" className="btn btn-secondary mt-3">
              Sign in
            </button>
          )}
          <div>
            <Link to="/register" className="badge badge-light p-2 m-2">
              Register
            </Link>
          </div>
        </form>
      </div>
    );
  }
}

export default Index;

从'react router dom'导入{Link}；
类索引扩展组件{
状态={
错误消息：false，
isValueCorrect:false，
信息：{
电子邮件：“”，
密码：“”
},
登录：{
电邮:'Email@gmail.com',
密码：“1234”
}
};
updateInfo=e=>{
这是我的国家({
信息：{…this.state.login[e.target.name]：e.target.value}
});
};
提交=e=>{
e、 预防默认值（）；
如果(
this.state.info.email==this.state.login.email&&
this.state.info.password===this.state.login.password
) {
this.setState（{isValueCorrect:true}）；
}否则{
this.setState（{errorMessage:true}）；
}
};
render（）{
返回(
{this.state.errorMessage===真(
电子邮件或密码有误

)：null}
电邮：
密码：
{this.state.isValueCorrect==真(
登录
) : (
登录
)}
登记
);
}
}
出口违约指数；

您的评估确实正确，第一次单击仅验证数据。根据

isValueCorrect

状态标志显示提交按钮或假装为提交按钮的链接。该标志仅在表单提交后设置，而应在值正确时设置。有几种方法可以解决这个问题。选择一个，而不是两个

1.当值正确时设置标志。 并且只处理

submit

中的错误

submit = e => {
  e.preventDefault();
  if (!this.state.isValueCorrect) {
    this.setState({ errorMessage: true });
  }
};

2.使用

重定向

而不是

链接

将条件

{this.state.isValueCorrect===true…

三元替换为

<button type="submit" className="btn btn-secondary mt-3">
  Sign in
</button>

登录

并添加要渲染的条件路径

render() {
  if (isValuesCorrect) return <Redirect to="Profile" />
  return (
    ...
  );
}

render（）{
如果（IsValuesRect）返回
返回(
...
);
}

其他错误

• login

  in状态永远不会更改，因此它应该是类的静态常量，而不是处于状态的字段
• updateInfo传播

  state.login

  到

  state.info

  ，这时它应该传播

  state.info

<button type="submit" className="btn btn-secondary mt-3">
  Sign in
</button>

render() {
  if (isValuesCorrect) return <Redirect to="Profile" />
  return (
    ...
  );
}