Node.js 如何在react中的表单验证后将用户发送到下一页？

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

这是下面的注册代码

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;

我在路由器中包装组件注册和登录

这是我的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');
      }
    }
  );
});

---

您的

validForm

进行异步调用。异步调用完成时，

validForm

函数以及

handleSubmit

函数的执行已经完成。然后执行

Then

块，在该块中设置状态，从而设置错误

解决方案：将

validForm

设置为异步函数，并等待您的异步调用。同时将

handleSubmit

函数设为异步，并等待

validForm

代码片段

类注册扩展组件{
建造师（道具）{
超级（道具）；
this.state=initianValue；
this.handleInputChange=this.handleInputChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleInputChange=e=>{
这是我的国家({
[e.target.name]：e.target.value
});
};
异步有效格式（）{
让nameError=“”；
让过路人=”；
设dataError=“”；
常量用户={
用户名：this.state.username，
密码：this.state.password
};
如果（！this.state.username）{
nameError=“输入名称”；
}
if（user.username！==“”&user.password！==“”）{
等待Axios。获取（“https://jsonplaceholder.typicode.com/todos/1“，用户）//伪api
。然后（res=>{
dataError=“用户已存在”；//提供动态错误。。
//this.setState（{dataError:res.data}）；//不是必需的
})
.catch（err=>console.log（“err”，err））；
}
如果（！this.state.password）{
passError=“输入密码”；
}
if（名称错误| | | | | |数据错误）{
这是我的国家({
名称错误，
过路人，
数据错误
});
返回false；
}
返回true；
}
handleSubmit=async e=>{
e、 预防默认值（）；
const isvalid=wait this.validForm（）；
如果（有效）{
this.setState（initianValue，（）=>this.props.history.push（“/sign”）；
}
};
render（）{
返回(
创建帐户
用户名
{this.state.nameError}
{this.state.dataError}


密码
{this.state.passeror}


注册
已经有帐户登录
);
}
}

问题可能出在抓取响应的处理上。这只是一个快速猜测，但不要设置dataError的状态，只需修改变量dataError的值，该变量是您在此局部函数中声明的，而不是类变量。这有意义吗？当您签入“if（namererror | | | passeror | | | dataError）”时，您是在检查函数的局部变量，而不是类，我认为这很好，但如果响应是错误，您不会更改变量。 第二，如果更改设置状态，然后检查state.dataError，则可能无法在函数中获得更新值refresh

---

让我知道这是否有意义，是否有效。

它没有得到它！我是说怎么做？

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');
      }
    }
  );
});