Почему мой счетчик не появляется при нажатии входа? - PullRequest
Новая
       6

Почему мой счетчик не появляется при нажатии входа?

0 голосов
/ 06 ноября 2018

Я бы хотел, чтобы мой счетчик появлялся при нажатии пользователем входа в систему. Я проверяю, является ли loading истинным в login() методе. Если это так, заставьте вертушку появиться. Я боролся с этим часами, не могу понять, что я делаю не так.

Что я делаю не так и как я могу это исправить? 

import React, {Component} from 'react';
import fire from '../../config/Fire';
import classes from './Login.css';
import Spinner from '../../UI/Spinner/Spinner';

import { Link } from 'react-router-dom';


class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            loading: false
        };
        this.login = this.login.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.signup = this.signup.bind(this);
    }

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

    login() { 
        fire.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((u) => {
        }).catch((error) => {
            console.log(error);
        });

        this.setState({loading: true});

        if(this.state.loading) {
            return(
              <Spinner/>
            );
        }
    }

    signup(e) {
        e.preventDefault();
        fire.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then((u) => {
        }).then((u) => {
            console.log(u)
        })
            .catch((error) => {
                console.log(error);
            })
    }

    render() {
        return (

            <div className={classes.Middle}>
                <div className="form-group">
                    <h1>Email address</h1>
                    <input value={this.state.email} onChange={this.handleChange} type="email" name="email"
                           className="form-control" placeholder="Enter email"/>
                </div>
                <div className="form-group">
                    <h1>Password</h1>
                    <input value={this.state.password} onChange={this.handleChange} type="password" name="password"
                           className="form-control" placeholder="Password"/>
                </div>

                <Link to={{
                    pathname: '/ChooseTruck'
                }}>
                    <button type="submit" onClick={this.login.bind(this)} className="btn btn-primary">Login</button>
                </Link>


                <button onClick={this.signup}>Signup</button>
            </div>
        );
    }
}

export default Login;

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

логин должен быть не-рендерным методом, который делает ваш запрос на вход, это происходит по событию. Ваш загрузчик должен идти в методе рендеринга (или вызываемой им функции). 

login() { 
  this.setState({loading: true});

  fire.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
    .then((u) => {
      console.log(u);
    })
    .catch(console.error)
    .then(() => this.setState({loading: false}))
}


render() {
    return (

        <div className={classes.Middle}>
            <div className="form-group">
                <h1>Email address</h1>
                <input value={this.state.email} onChange={this.handleChange} type="email" name="email"
                       className="form-control" placeholder="Enter email"/>
            </div>
            <div className="form-group">
                <h1>Password</h1>
                <input value={this.state.password} onChange={this.handleChange} type="password" name="password"
                       className="form-control" placeholder="Password"/>
            </div>

            <Link to={{
                pathname: '/ChooseTruck'
            }}>
                <button type="submit" onClick={this.login.bind(this)} className="btn btn-primary">Login</button>
            </Link>


            <button onClick={this.signup}>Signup</button>

            {this.state.loading && <Spinner/>}
        </div>
    );
}
0 голосов
/ 06 ноября 2018

Я вижу, в чем ваша проблема, вы пытаетесь вернуть загрузчик в функцию входа в систему, которая выполнима, но не с вашей текущей реализацией. Я хотел бы предложить вам поместить компонент <Spinner /> в результат рендеринга и показывать его только при загрузке состояния.

Примерно так: 

render() {
    return (
        this.state.loading ? <Spinner /> : <div> rest of your code </div>
    )
}

Здесь вы говорите, что если состояние загрузки истинно, то визуализируйте счетчик, иначе покажите остальную часть страницы. Это гораздо лучший подход к тому, чего вы пытаетесь достичь.

Вы также можете удалить часть кода из функции входа в систему, которая возвращает компонент Spinner. 

if(this.state.loading) {
        return(
          <Spinner/>
        );
    }

Ударь меня, если у тебя есть вопросы.

Надеюсь, это поможет. :)

...