为什么我卡在加载屏幕上？

Question

在浏览器中执行并尝试注册时，我卡在反应加载屏幕上。目标是添加在文本字段中传递的用户详细信息，以插入到 Firebase 身份验证和存储集合中。同样的事情也发生在登录组件中。这似乎是firebase的一个问题，但我不确定它到底是什么。

import React from 'react';
import {Card} from 'react-bootstrap';
import {Link} from 'react-router-dom';
import Grid from '@material-ui/core/Grid';
import LoginString from '../../loginstrings';
import TextField from '@material-ui/core/TextField';
import ReactLoading from 'react-loading';
import { createUserWithEmailAndPassword, getAuth } from 'firebase/auth';
var firebase = require("firebase/app");
require("firebase/auth");
require("firebase/firestore");

class SignUp extends React.Component{
    constructor(props){
        super(props)
        this.state ={
            isLoading: false,
            email: "",
            password: "",
            name:""
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
   
    handleChange(event){
        this.setState({
            [event.target.name]: event.target.value
        });
    }
    async handleSubmit(event){
        const {name,password,email} = this.state;
        event.preventDefault();
        this.setState({isLoading: true})
        try {
            const auth = getAuth();
            const userCredential = await createUserWithEmailAndPassword(auth, email, password);
            userCredential.then(async result => {
                await firebase.firestore().collection('users')
                .add({
                    name,
                    id:result.user.uid,
                    email,
                    password,
                    URL:'',
                    description:''
                })
                .then((docRef)=>{
                        localStorage.setItem(LoginString.FirebaseDocumentId, docRef.id);
                        localStorage.setItem(LoginString.ID, result.user.uid);
                        localStorage.setItem(LoginString.name, name);
                        localStorage.setItem(LoginString.email, email);
                        localStorage.setItem(LoginString.PhotoURL, "");
                        localStorage.setItem(LoginString.Description, "");
                        this.setState({isLoading: false});
                        this.props.history.push('/chat');
                }).catch(function(error){
                    document.getElementById('1').innerHTML="User Already exists or poor internet";
                })
        })
        }catch{
            console.log("Failed To Authenticate")
        }   
    }
    render(){
        const paper={
            display:'flex',
            flexDirection:'column',
            alignItems:'center',
            paddingLeft:'10px',
            paddingRight:'10px',
            marginTop:'10px'
        }
        return(
           <Grid  container component="main" className="root">
              <Grid item xs={1} sm={4} md={7} className="image">
                   <div className="leftimage">
                   {this.state.isLoading ? (
                       <div className="viewLoadingProfile">
                           <ReactLoading
                           type={'spin'}
                           color={'#203152'}
                           height={'10%'}
                           width={'10%'}
                           />
                       </div>
                   ): null}
                   </div>
                   </Grid>
               <Grid item xs={12} sm={8} md={5} className="loginrightcomponent" elevation={6} >
                 <Card style={{display:'flex',flexDirection:'column',alignItems:'center', width:'100%', boxShadow:"0 5px 5px #808888"}}>
                     <Link to="/">
                         <button class="btnhome">
                             <i class="fa fa-home"><span>Go to Home</span></i>
                         </button>
                     </Link>
                 </Card>
                 <div style={paper}>
                     <form style={{marginTop:'50px',width:'100%'}} noValidate onSubmit={this.handleSubmit}>
                         <TextField
                         variant="outlined"
                         margin="normal"
                         required
                         fullWidth
                         id="email"
                         label="Email Address"
                         name="email"
                         autoComplete="email"
                         autoFocus
                         onChange={this.handleChange}
                         value={this.state.email}
                         />
                            <TextField
                         variant="outlined"
                         margin="normal"
                         required
                         fullWidth
                         id="password"
                         label="Password:"
                         name="password"
                         type="password"
                         autoComplete="current-password"
                         autoFocus
                         onChange={this.handleChange}
                         value={this.state.password}
                         /> 
                            <TextField
                         variant="outlined"
                         margin="normal"
                         required
                         fullWidth
                         id="name"
                         label="Your Name"
                         name="name"
                         autoComplete="name"
                         autoFocus
                         onChange={this.handleChange}
                         value={this.state.name}
                         />
                         <div>
                             <p style={{color:'grey', fontSize:'15px'}}>Please fill all fields and password should be greater than 6</p>
                         </div>
                         <div className="CenterAliningItems">           
                                 <button className="button1" type="submit">
                                     Signup
                                 </button>     
                            </div>   
                            <div>
                                <p id='1' style={{color:'red'}}></p>
                            </div>  
                     </form>
                 </div>
               </Grid>
           </Grid>

        );
    };
};
export default SignUp;

Answer 1

请在两个 catch 块中添加此行

this.setState({ isLoading: false });

我认为发生了异常，并且由于您没有在 catch 块中将加载更改回 false，因此它一直显示加载屏幕