这在我的注册组件中，如果用户名和密码正确，我会尝试将用户发送到登录组件。

这是下面的注册码，

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Axios from 'axios';

const initianValue = {
  username: '',
  password: '',
  nameError: '',
  passError: '',
  dataError: '',
};

class SignUp extends Component {
  constructor(props) {
    super(props);
    this.state = initianValue;
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  validForm() {
    let nameError = '';
    let passError = '';
    let dataError = '';

    const user = {
      username: this.state.username,
      password: this.state.password,
    };

    if (!this.state.username) {
      nameError = 'Enter Name';
    }

    if (user.username !== '' && user.password !== '') {
      Axios.post('http://localhost:9000/checkUser', user)
        .then((res) => this.setState({ dataError: res.data }))
        .catch((err) => console.log(err));
    }

    if (!this.state.password) {
      passError = 'Enter Password';
    }

    if (nameError || passError || dataError) {
      this.setState({
        nameError,
        passError,
        dataError,
      });
      return false;
    }

    return true;
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const isvalid = this.validForm();
    if (isvalid) {
      this.setState(initianValue, () => this.props.history.push('/SignIn'));
    }
  };

  render() {
    return (
      <div className='Main'>
        <span className='create'>Create Account</span>
        <div className='SignUp'>
          <form onSubmit={this.handleSubmit}>
            <div className='form-group'>
              <label>Username</label>
              <input
                type='text'
                name='username'
                value={this.state.username}
                className='form-control'
                onChange={this.handleInputChange}
              />
              <div className='error'>
                {this.state.nameError}
                {this.state.dataError}
              </div>
              <br />
              <label>Password</label>
              <input
                type='password'
                name='password'
                value={this.state.password}
                className='form-control'
                onChange={this.handleInputChange}
              />
              <div className='error'>{this.state.passError}</div>
              <br />

              <button type='submit' className='btn btn-primary'>
                Sign Up
              </button>
            </div>
          </form>
        </div>
        <div className='signinForm'>
          <label>
            Already Have Account <Link to='/Signin'> Sign In </Link>
          </label>
        </div>
      </div>
    );
  }
}

export default SignUp;

如果我输入正确的用户名和密码但输入错误的用户名/密码，它的工作原理很完美，它也会将我发送到登录页面并像这样在控制台中显示警告

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in SignUp (created by Context.Consumer)

我包装了组件注册和登录路由器，

这是我的 server.js 文件，如果数据库中的用户名和密码正确，将发送数据

app.post('/checkUser', function (req, res) {
  const name = req.body.username;
  const pass = req.body.password;

  conn.query(
    `SELECT * FROM users WHERE username  = (?) AND password = (?) `,
    [name, pass],
    (err, rows) => {
      if (err) throw err;

      if (!rows.length) {
        res.send('Wrong Data');
      }
    }
  );
});