Javascript 为什么赢了'；单击“登录”时是否显示我的微调器？

我想让我的微调器出现在用户单击登录时。我正在检查

login（）

方法中的

load

是否为true。如果是，则显示微调器。我已经为此挣扎了几个小时，看不出我做错了什么

我做错了什么？我该如何修复它

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;

import React，{Component}来自'React'；
从“../../config/fire”导入火；
从“/Login.css”导入类；
从“../UI/Spinner/Spinner”导入微调器；
从'react router dom'导入{Link}；
类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”，
加载：错误
};
this.login=this.login.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.signup=this.signup.bind（this）；
}
手变（e）{
this.setState（{[e.target.name]：e.target.value}）；
}
登录名（{
fire.auth（）.使用email和password（this.state.email，this.state.password）登录。然后（（u）=>{
}).catch（（错误）=>{
console.log（错误）；
});
this.setState（{loading:true}）；
if（this.state.loading）{
返回(
);
}
}
注册（e）{
e、 预防默认值（）；
fire.auth（）.createUserWithEmailAndPassword（this.state.email，this.state.password）。然后（（u）=>{
})。然后（（u）=>{
控制台日志（u）
})
.catch（（错误）=>{
console.log（错误）；
})
}
render（）{
返回(
电子邮件地址
密码
登录
报名
);
}
}
导出默认登录；

我明白了您的问题所在，您正在尝试在登录函数中返回加载程序，这是可行的，但在当前实现中不可行。我建议您做的是将

组件放入渲染的返回中，并仅在加载状态时显示它

大概是这样的：

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

如果你有任何问题，打电话给我

---

希望这有帮助。：）

登录应该是一个非呈现方法，它会在事件中发出登录请求。加载微调器应位于render方法（或其调用的函数）中

login（）{
this.setState（{loading:true}）；
fire.auth（）.signiWithEmailandPassword（this.state.email，this.state.password）
。然后（（u）=>{
控制台日志（u）；
})
.catch（console.error）
.then（（）=>this.setState（{loading:false}））
}
render（）{
返回(
电子邮件地址
密码
登录
报名
{this.state.loading&&}
);
}

bro。。。。实际上，我只是按照你在看到你的帖子之前提到的方式自己修复了它。谢谢：那你就是野兽了！干得好

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

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