reactjs - 类型错误：__WEBPACK_IMPORTED_MODULE_1__firebase__.a.auth(...).createUserWithEmailandPassword 不是函数

Question

我是 React 和 Firebase 的初学者，当我尝试从前端注册用户时遇到了这个问题。谁能帮帮我。？我正在使用 Firebase 6.0.2 版。有没有其他方法可以解决这个问题..或者我降级到旧版本的firebase。

注册.js

import React from 'react';
import firebase from '../../firebase';
import {Grid,Form,Segment,Button,Header,Message,Icon} from 'semantic-ui-react';
import {Link} from 'react-router-dom'

class Register extends React.Component{
    state={
        username:'',
        email:'',
        password:'',
        passwordConfirmation:''

    }

    handleChange=event=>{
        this.setState({
            [event.target.name]:event.target.value
        })
    }

    handleSubmit=event=>{
        event.preventDefault();
        firebase
         .auth()
         .createUserWithEmailandPassword(this.state.email,this.state.password)
         .then(createdUser=>{
            console.log(createdUser);
         })
         .catch(err=>{
            console.log(err);

         } )
    }



    render(){
        const {username,email,password,passwordConfirmation}=this.state
        return(
            <Grid textAlign="center" verticalAlign="middle"className="app">
                <Grid.Column style={{maxWidth:450}}>
                    <Header as="h2" icon color="orange" textAlign="center">
                        <Icon name="puzzle piece" color="orange"/>
                            Register for DevChat 
                    </Header>
                    <Form onSubmit={this.handleSubmit}size="large">
                        <Segment stacked>
                            <Form.Input 
                            fluid name="username" 
                            icon="user" iconPosition="left"
                            placeholder="Username" 
                            onChange={this.handleChange} 
                            value={username}
                            type="text"/>

                             <Form.Input fluid name="email" 
                             icon="mail" iconPosition="left"
                            placeholder="Email Address" 
                            onChange={this.handleChange} 
                            value={email}
                            type="email"/>

                            <Form.Input fluid name="password" 
                            icon="lock" iconPosition="left"
                            placeholder="Password" 
                            onChange={this.handleChange} 
                            value={password}
                            type="password"/>

                            <Form.Input fluid name="passwordConfirmation" 
                            icon="repeat" 
                            iconPosition="left"
                            placeholder="Password Confirmation" 
                            onChange={this.handleChange} 
                            value={passwordConfirmation}
                            type="password"/>

                        <Button color="orange" fluid size="large">Submit</Button>
                        
                       
                       
                        </Segment>

                    </Form>
                    <Message> Already a user?<Link to="/login">Login</Link> </Message>
                </Grid.Column>
            </Grid>
        )
    }
}

export default Register

firebase.js

import firebase from 'firebase/app';
import "firebase/auth"
import "firebase/database"
import "firebase/storage"

const firebaseConfig = {
    //credentails
  };
  firebase.initializeApp(firebaseConfig);


  export default firebase;

提前致谢！

Answer 1

弗兰克斯的评论是正确的，你有一个类型错误

您的句柄提交：

 handleSubmit=event=>{
        event.preventDefault();
        firebase
         .auth()
         .createUserWithEmailandPassword(this.state.email,this.state.password)
         .then(createdUser=>{
            console.log(createdUser);
         })
         .catch(err=>{
            console.log(err);

         } )
    }

您的句柄提交应如下所示或将您的功能更改为此

 handleSubmit=event=>{
        event.preventDefault();
        firebase
  .auth()
  .createUserWithEmailAndPassword(this.state.email,this.state.password) //change in this line
  .then(createdUser=>{
   console.log(createdUser);
    })
  .catch(err=>{
      console.log(err);
         })
    }

如果弗兰克的解决方案对您有用，请忽略这一点（因为这是相同的，但在代码中）