React Functional Component未接收异步数据，似乎停止运行Mid-Function

 admin  2023-05-26
Share: Twitter Facebook Pinterest Reddit VK Digg Linkedin Mix

我的firebase组件检索我想要的数据(一个布尔值，它告诉我用户是管理员还是用户)。但是我不能让它将这个布尔值传递给需要它的Login组件。实际上，代码似乎在初始调用后停止运行，因为我没有获得控制台的任何后续日志。

我还没能在谷歌上搜索到任何能解决这个特定问题的东西，这通常意味着我需要后退一步，扩大我的搜索范围。我想有一些内在的功能组件的动态，我只是没有得到。

我已经将这段代码简化为获得我想要的结果所需的最低限度。如果我们能让这个checkAdminStatus调用记录为"true“(当它实际上为true时)，我就可以从那里开始了。谢谢！

Login.js：

import React, { useRef, useState } from 'react'
import { Form, Button, Card, Alert } from 'react-bootstrap'
import { useAuth } from '../contexts/AuthContext'
import { Link, useHistory } from 'react-router-dom'
import { checkAdminStatus } from '../firebase';

export default function Login() {
    const emailRef = useRef();
    const passwordRef = useRef();
    const { login } = useAuth();
    const [status, setStatus] = useState(false);
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);
    const history = useHistory();

    async function handleSubmit(e) {
        e.preventDefault();

        try {
            setError('');
            setLoading(true);

            setStatus(checkAdminStatus(emailRef.current.value));
            console.log(status);
            await login(emailRef.current.value, passwordRef.current.value);

        } catch {
            setError('Failed to log in');
        };
        setLoading(false);
    };

    return (
        <div>

            <Card>
                <Card.Body>
                    <h2>Log In</h2>
                    {error && <Alert variant="danger">{error}</Alert>}
                    <Form onSubmit={handleSubmit}>
                        <Form.Group id="email">
                            <Form.Label>Email</Form.Label>
                            <Form.Control type="email" ref={emailRef} required>
                            </Form.Control>
                        </Form.Group>
                        <Form.Group id="password">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" ref={passwordRef} required>
                            </Form.Control>
                        </Form.Group>
                        <Button disabled={loading} type="submit">Submit</Button>
                    </Form>
                    <div className="w-100 text-center mt-3">
                        <Link to="/forgot-password">Forgot Password?</Link>
                    </div>
                </Card.Body>
            </Card>
            <div className="text-center mt-2"><Link to="./SignUp">Or Sign Up Here</Link></div>
        </div>
    )
}

firebase.js (这一切都有效)

const db = firebase.firestore(app);
const user = app.auth().currentUser;
const colRef = db.collection("users");

export async function checkAdminStatus(emailRef) {
    if (emailRef !== null) {
        console.log(emailRef);

        await colRef.doc(emailRef).get().then((doc) => {
            if (doc.exists) {
                console.log("Document data:", doc.data().isAdmin);
                return doc.data().isAdmin;
            } else {
                // doc.data() will be undefined in this case
                console.log("No such document!");
            }
        }).catch((error) => {
            console.log("Error getting document:", error);
        });
    }
}

转载请注明出处:http://www.shenzhenzsmy.com/article/20230526/2005759.html