Question

我想让我的微调器出现在用户单击登录后。我正在检查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;

Answer 1

我知道您的问题是什么，您正在尝试通过可行的登录功能返回加载程序，但当前的实现却不可行。我建议您做的是将<Spinner />组件放入渲染的返回区域，并仅在加载状态时显示它。

类似这样的东西：

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

您在这里说的是，如果加载状态为true，则渲染微调框，否则显示页面的其余部分。对于您要完成的工作，这是一种更好的方法。

您还可以从返回Spinner组件的登录功能中删除代码的安全性。

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

如果有任何问题请打我。

希望这会有所帮助。：）

Answer 2

login应该是发出请求的非呈现方法，它发生在事件上。您的载入微调器应进入render方法（或由它调用的函数）。

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

为什么单击登录后我的微调框不出现？

2 个答案: