Реагировать на JS Почему Page не может перенаправить пользователя на целевую страницу

Question

У меня есть страница входа, написанная на реагировать на jS, она использует данные из файла json, которые отражают текущую настройку:

{
    "userName": "jjraff",
    "firstName": "jon",
    "lastName": "doe",
    "password": null,
    "token": "abc123.efg456.hijk789"
}

При тестировании страницы я ввел имя пользователя как jjraff и оставил поле пароля пустым, поскольку оно равно нулю. Когда я нажимаю кнопку отправки, странице не удается направить пользователя на указанную целевую страницу.

Я выполнил console.log, чтобы подтвердить, что моя страница читает данные из файла json; в консоли это показывает имя пользователя как jjraff и пароль, который является нулем. Я также вывел значения, используемые в моем условном выражении, например:

console.log('The user name is:' + this.state.data.userName)

... и возвращает пользователя, (я сделал то же самое для пароля)

Полный код:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './Login.css';
import { withRouter } from 'react-router-dom';

class Login extends Component {

    constructor() {
        super();
        this.state = {
            data: [],
            userName: "",
            password: "",
            token: "",
        };
    } //end constructor

         change = (e) => {
            this.setState({
                [e.target.name]: e.target.value
            });
        }; //end change

        onSubmit = (e) =>{
            e.preventDefault();
            //console.log(this.state);
            this.setState({
                userName: "",
                password: "",
                token: "",
            });

            var userName = document.getElementById('userName').value
            var password = document.getElementById('password').value

            for(var i=0; i < this.state.data.length; i++) {
                if(userName == this.state.data[i].userName && password == this.state.data[i].password) {
                    //console.log(userName + " " + "is logged in")
                    this.props.history.push('/ast');
                }
                else {
                    console.log("incorrect username or password")
                }
            }
        };

     componentDidMount() {
        fetch('http://testingURL/api/auth?username=jjraff&password=pwd', {
            method: 'POST',
            headers: {
                'Content-type': 'application/json',
            },
             body: JSON.stringify({
                username: 'userName',
                password: 'pwd',
            })
        }) /*end fetch */
        .then(results => results.json())
        .then(data => this.setState({ data: data })
    )

} //end life cycle

    render() {
    //console.log(this.state.data);
    //console.log('The user name is:' + this.state.data.userName);
    //console.log('The Password is:' + this.state.data.password);
        return (
           <div>

            <div className="container">
                <div className="loginContainer">
                <h2>Member Login</h2>
                    <form>
                            <input
                            id="userName"
                            name="userName"
                            placeholder="User Name"
                            value={this.state.userName}
                            onChange={e => this.change(e) }
                            className="form-control"
                            />  <br />
                            <input
                            id="password"
                            name="password"
                            type="password"
                            placeholder="Password"
                            value={this.state.password}
                            onChange={e => this.change(e) }
                            className="form-control"
                            />  <br />
                            <input
                            id="token"
                            name="token"
                            placeholder="Token"
                            value={this.state.token}
                            onChange={e => this.change(e) }
                            hidden="true"
                            />
                        <button onClick={e => this.onSubmit(e)} className="btn btn-primary">Submit</button>
                        </form>
                    </div>
                    <div className="spacer"></div>
                </div>

            </div>
        );
      }
}

export default withRouter(Login);  

... что-то не так в моем условном утверждении? Могу я получить помощь, пожалуйста?

Answer 1

В вашем constructor установите значение по умолчанию для password на null, теперь это пустая строка, которая не совпадает с null.

Вы также обращаетесь к полям, установленным в атрибуте this.state.data, но вносите изменения в корень состояния. Почему вы запускаете это в цикле?

Вы получаете значения, используя getElementById().value, почему? У вас есть значения в состоянии.