TypeError: Object(…) 不是函数

Posted 2023-02-19

【中文标题】TypeError: Object(…) 不是函数

【英文标题】：TypeError: Object(…) is not a function

【发布时间】：2019-08-12 01:34:30

【问题描述】：

我正在尝试使用 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);

这是我的动作创建者 --> 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)
    )
 

这是我的减速器 --> 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!

【问题讨论】：

``` return (dispatch, getState, getFirebase) => const firebase = getFirebase(); ... ``` getFirebase 不需要括号

当我删除括号时，错误返回为“getFirebase 不是函数”。

也许共享一个密码箱。

沙盒没有你的代码？

抱歉，已修复 --> codesandbox.io/s/p9v25xm3l7?fontsize=14

【参考方案1】：

我在旧版本的 react 中尝试使用钩子时遇到了这个错误。解决方案是升级反应版本。这可能也适用于尝试导入包的其他不存在的属性。

【参考方案2】：

现在有一种方法可以从“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 函数作为道具可供组件使用。因此 onSubmit() 函数中的this.props.firebase.login()。我不需要登录操作。