React - 将Firebase错误返回到LoginForm错误状态

我仍然是React的新手，但我觉得这是一个非常基本的问题，我无法确定解决方案 . 我有一个登录表单，其中包含使用电子邮件/密码将登录数据作为Firebase登录的状态，并设法通过传递它来使其工作 . 其中一种状态是错误，最初用于确保输入了电子邮件和密码 - 但我想用它来存储/显示任何Firebase错误 . 但是，当Firebase返回错误（密码错误，没有用户等）时，我无法将其推回到LoginForm错误状态 . 有人可以帮忙吗？谢谢！

我有三个文件：

actions/auth.js ：这用firebase处理登录 .

export const startLogin = (loginData) => {
    return () => {
        return firebase.auth()
            .signInWithEmailAndPassword(loginData.email, loginData.password)
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
                console.log(errorCode, errorMessage);
                if (errorCode == 'auth/user-not-found') {
                    console.log('User not found.');
                } else if (errorCode == 'auth/wrong-password') {
                    console.log('Wrong password.');
                } else if (errorCode == 'auth/network-request-failed') {
                    console.log('Network error.');
                }
            });
    };
};

components/LoginPage.js ：这是托管LoginForm组件的页面

export class LoginPage extends React.Component {
    onSubmit = (loginData) => {
        this.props.startLogin(loginData);
        if (loginData.error == '') {
            this.props.history.push('/dashboard');
        } else {
            console.log('ERROR DETECTED');
        }

    };
    render() {
        return(
            <div className="box-layout">
                <div className="box-layout__box">
                    <LoginForm 
                        onSubmit={this.onSubmit}
                    />
                </div>
            </div>
        );
    }
};

const mapDispatchToProps = (dispatch) => ({
    startLogin: (loginData) => dispatch(startLogin(loginData))
});

export default connect(undefined, mapDispatchToProps)(LoginPage);

components/LoginForm.js ：带有输入和状态的登录表单 .

export default class LoginForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
            error: ''
        };
    };

    onEmailChange = (e) => {
        const email = e.target.value;
        this.setState(() => ({ email }));
    };

    onPasswordChange = (e) => {
        const password = e.target.value;
        this.setState(() => ({ password }));
    };

    onSubmit = (e) => {
        e.preventDefault();

        if (!this.state.email || !this.state.password) {
            this.setState(() => ({ error: 'Please provide email and password.' }));
        } else {
            this.setState(() => ({ error: '' }));
            this.props.onSubmit({
                email: this.state.email,
                password: this.state.password
            });
        }
    };

    render() {
        return (
            <form className="form" onSubmit={this.onSubmit}>
                <label htmlFor="email">Email Address</label>
                <input
                    className="text-input"
                    id="email"
                    name="email"
                    onChange={this.onEmailChange}
                    placeholder="Email address"
                    type="email"
                />
                <label htmlFor="password">Password</label>
                <input
                    className="text-input"
                    id="password"
                    name="password"
                    onChange={this.onPasswordChange}
                    placeholder="Password"
                    type="password"
                />
                {this.state.error && <p className="form__error">{this.state.error}</p>}
                <button className="button">Login</button>
            </form>
        );
    };
}