javascript - 类型错误 : Object(…) is not a function

Question

我正在尝试使用 Firebase 和 Redux 执行身份验证。当我尝试登录时出现错误:“Uncaught TypeError: Object(...) is not a function”

这是我的“登录”组件:

import React, {  Component }  from 'react';
import { connect } from 'react-redux';
import { signIn } from '../store/actions/authActions'

class Login extends Component {
constructor(props){
  super(props);
  this.state={
    email:'',
    password:''
  };

  this.onChangeEmail=this.onChangeEmail.bind(this);
  this.onChangePassword =this.onChangePassword.bind(this);
  this.onSubmit = this.onSubmit.bind(this);
}

onChangeEmail(e) {
  this.setState({
    email:e.target.value
  });
}

onChangePassword(e){
  this.setState({
    password:e.target.value
  });
}
  onSubmit(e){
    e.preventDefault();
    this.props.signIn(this.state);
  }


render() {
    return(
        <div className="container">
        <div className="row">
          <div className="col-sm-9 col-md-7 col-lg-5 mx-auto">
            <div className="card card-signin my-5">
              <div className="card-body">
                <h5 className="card-title text-center">Sign In</h5>
                <form className="form-signin" onSubmit={this.onSubmit}>
                  <div className="form-label-group">
                  <label>Email address
                    <input type="email" id="inputEmail" className="form-control" placeholder="Email address" value={this.state.email} onChange={this.onChangeEmail} required autoFocus />
                    </label>
                  </div>

                  <div className="form-label-group">
                  <label>Password
                    <input type="password" id="inputPassword" className="form-control" placeholder="Password" 
                    value={this.state.password}
                    onChange={this.onChangePassword}
                    required />
                  </label>                   
                  </div>

                  <div className="custom-control custom-checkbox mb-3">
                    <input type="checkbox" className="custom-control-input" id="customCheck1" />
                    <label className="custom-control-label" >Remember password
                    </label>
                  </div>
                  <button className="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
                  <hr className="my-4" />

                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
 }
}

const mapDispatchToProps = (dispatch) => {
  return {
   signIn: (creds) => dispatch(signIn(creds))
  }
}

export default connect(null, mapDispatchToProps) (Login);

这是我的 action creator --> authAction.js

export const signIn = (credentials) => {
return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();
    firebase.auth().signInWIthEmailandPassword(
        credentials.email,
        credentials.password
    ).then(()=> {
        dispatch ({ type: 'LOGIN_SUCCESS'})
    }).catch((err) => {
        dispatch('LOGIN_ERROR', err)
    })
 }
}

这是我的 reducer --> authReducer.js

const initialState = {
authError: null
}

 const authReducer = (state = initialState, action) => {

switch (action.type){
    case 'LOGIN_ERROR': 
        console.log('Login Success')
        return  {
            ...state, 
            authError: 'Login Failed'
        }
    case 'LOGIN_SUCCESS':
        console.log('Login Success');
        return {
            ...state,
            authError: null
        }
        default:
            return state;
 }
}

export default authReducer; 

调度正在映射到组件，因为当我在登录组件中使用 console.log(this.props) 时可以看到它。但我不知道我错过了什么。我正在使用“redux-thunk”作为中间件。也许这是一个问题？

这是我配置中间件的“index.js”文件:

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './components/Root'
import './style.css';
import 'bootstrap/dist/css/bootstrap.css';

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk'
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import rootReducer from './store/reducers/rootReducer';

import configFB from './config/configFB'


import * as serviceWorker from './serviceWorker';


const store = createStore(rootReducer, 
  compose(
    applyMiddleware(thunk.withExtraArgument(getFirebase)),
    reactReduxFirebase(configFB), // redux binding for firebase
  )
); 

ReactDOM.render(<Root store={store} />, document.getElementById('root'));

我有一个代码位于 here! 的沙箱

Answer 1

现在有一种方法可以从“react-redux-firebase”中导入`{withFirebase}，这样您就可以将组件转换为高阶组件。

import React, {  Component } from 'react';
import { withFirebase } from 'react-redux-firebase'

class Login extends Component {
   state={
   email:‘’,
   password:‘’
   };

 onChangeEmail = (e) => {
   this.setState({
   email:e.target.value
  });
  }

onChangePassword = (e) => {
   this.setState({
  password:e.target.value
  });
}

  onSubmit = (e) => {
    e.preventDefault();
    this.props.firebase.login(this.state).catch(err => 
   console.log(err.message))
   }

   return(
    Component Markup
    )

 export default withFirebase(Login);

当您将组件包装在 withFirebase() 函数中时，它会将组件变成高阶组件，并使组件可以使用某些 firebase 函数作为 props。因此 this.props.firebase.login() 在 onSubmit() 函数中。我不需要登录操作。