Question

我遇到以下错误

网络错误（例如超时，连接中断或无法访问的主机）。

此演示技术上在stackblitz.com上工作（新用户将在支持的Firebase上填充）。在本地服务器上不起作用。

本地主机已列入白名单。

https://stackblitz.com/edit/react-gr9qck

actions.js

import { auth as firebaseAuth } from '../firebaseConfig'

export const EMAIL_SIGN_UP_CHANGE = 'EMAIL_SIGN_UP_CHANGE';
export const PASSWORD_SIGN_UP_CHANGE = 'PASSWORD_SIGN_UP_CHANGE';

export const onEmailSignUpChangeAction = value => ({
    type: EMAIL_SIGN_UP_CHANGE,
    email: value
})

export const onPasswordSignUpChangeAction = value => ({
    type: PASSWORD_SIGN_UP_CHANGE,
    password: value
})



export const onEmptySignUpEmailClick = () => ({
    type: 'EMPTY_SIGN_UP_EMAIL'
})

export const onEmptySignUpPasswordClick = () => ({
    type: 'EMPTY_SIGN_UP_PASSWORD'
})

export const signUp = () => (dispatch, getState) => {
    const {signUpAuth} = getState();
    if (signUpAuth.emailSignUp === '') {
        dispatch(onEmptySignUpEmailClick())
    }
    if (signUpAuth.passwordSignUp === '') { dispatch(onEmptySignUpPasswordClick()) }
    else {

        firebaseAuth.createUserWithEmailAndPassword(signUpAuth.emailSignUp, signUpAuth.passwordSignUp)
            .catch( function (error) {
                let errorCode = error.code;
                let errorMessage = error.message;
                alert(errorMessage)
            })
    }

}

firebaseConfig（为保护而惊叹）

import firebase from 'firebase'

const config = {
    apiKey: "******",
    authDomain: "*****",
    databaseURL: "****",
    projectId: "******",
    storageBucket: "******",
    messagingSenderId: "*******"
};

firebase.initializeApp(config);

export const database = firebase.database()
export const auth = firebase.auth()
export const googleProvider = new firebase.auth.GoogleAuthProvider()

SignUp.js

import React, {Component} from 'react';
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import {signUp ,onEmailSignUpChangeAction,onPasswordSignUpChangeAction} from '../actions/';
class SignUp extends Component {
    state = {
        email: "",
        password: ""
    }

    // onChange = (e) =>{
    //   this.setState({
    //       [e.target.name] : e.target.value
    //   })
    // }
    // handleSubmit = (e) =>{
    //     e.preventDefault();
    //     this.props.signUp(this.state);
    //     // (register === true) && this.props.history.push('/');
    //     // console.log(this.state);
    // }
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-6">
                        <h1>Sign Up</h1>
                        <form onSubmit={this.props.signUp}>
                            <div className="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input
                                    type="email"
                                    className="form-control"
                                    id="email"
                                    onChange={this.props.onEmailSignUpChangeAction}
                                    aria-describedby="emailHelp"
                                    value={this.props.emailSignUp}
                                    placeholder="Enter email"/>
                                <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                            <div className="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input
                                    type="password"
                                    className="form-control"
                                    id="password"
                                    value={this.props.passwordSignUp}
                                    onChange={this.props.onPasswordSignUpChangeAction}
                                    placeholder="Password"/>
                            </div>

                            <button type="submit" className="btn btn-primary">Submit</button>
                        </form>
                    </div>

                </div>
            </div>

        );
    }

}

const mapStateToProps = (state) => ({
    user: state.auth.user,
    emailSignUp:state.signUpAuth.emailSignUp,
    passwordSignUp:state.signUpAuth.passwordSignUp

})

const mapDispatchToProps = (dispatch) => ({
    signUp: () => dispatch(signUp()),
    onEmailSignUpChangeAction: (event) => dispatch(onEmailSignUpChangeAction(event.target.value)),
    onPasswordSignUpChangeAction: (event) => dispatch(onPasswordSignUpChangeAction(event.target.value)),
}); 


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignUp));

signUpReducer

import { PASSWORD_SIGN_UP_CHANGE, EMAIL_SIGN_UP_CHANGE} from '../actions';

const initialState = {
    emailSignUp: '',
    passwordSignUp: ''

}

export default (state = initialState, action) => {
    switch (action.type) {
        case EMAIL_SIGN_UP_CHANGE:
            return {
                ...state,
                emailSignUp: action.email
            }
        case PASSWORD_SIGN_UP_CHANGE:
            return {
                ...state,
                passwordSignUp: action.password
            }
        default:
            return state
    }
}

Answer 1

我重构了代码。而不是使用表单标签。

我引用了这个

Can't Sign up with firebase

SignUp.js

render() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <h1>Sign Up</h1>
                    <div onClick={this.props.signUp}>
                        <div className="form-group">
                            <label htmlFor="exampleInputEmail1">Email address</label>
                            <input
                                type="email"
                                className="form-control"
                                id="email"
                                onChange={this.props.onEmailSignUpChangeAction}
                                aria-describedby="emailHelp"
                                value={this.props.emailSignUp}
                                placeholder="Enter email"/>
                            <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
                        </div>
                        <div className="form-group">
                            <label htmlFor="exampleInputPassword1">Password</label>
                            <input
                                type="password"
                                className="form-control"
                                id="password"
                                value={this.props.passwordSignUp}
                                onChange={this.props.onPasswordSignUpChangeAction}
                                placeholder="Password"/>
                        </div>

                        <button type="submit" className="btn btn-primary">Submit</button>
                    </div>
                </div>

            </div>
        </div>

    );
}

Firebase createUserWithEmailAndPassword上的超时连接

1 个答案: