reactjs - TypeError：无法在 Next.JS 和 with-redux-thunk 中将类作为函数调用

Question

我正在尝试将Next.js with-redux-thunk与身份验证应用程序集成。

因为应用程序很小，我知道我应该考虑道具钻探或上下文，但我想拥有某种商店，只是因为登录、注册和广播每个用户的设置和偏好应用程序。

TypeError：无法将类作为函数调用

我不会追踪到引发错误的组件吗？

 Note that pages will be compiled when you first load them.
TypeError: Cannot call a class as a function    at _classCallCheck (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/react-thunk/dist/comm
onjs/index.js:15:99)    at ReactThunk (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/react-thunk/dist/commonjs/
index.js:36:13)
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:604:14
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:648:47
    at createStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:85:33)
    at initStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_a
pp.js:1828:67)
    at getOrCreateStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/p
ages/_app.js:135:75)
    at _callee$ (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_ap
p.js:165:34)
    at tryCatch (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regenerator-runtime/runtime.
js:62:40)
    at Generator.invoke [as _invoke] (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regener
ator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder
/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development
/pages/_app.js:567:24)
    at _next (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.j
s:589:9)
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:596:7
    at new Promise (<anonymous>)
    at new F (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/core-js/library/modules/_export
.js:36:28)
    at Function.<anonymous> (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/developme
nt/pages/_app.js:585:12)
    at Function.getInitialProps (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/devel
opment/pages/_app.js:195:37)
    at Object.loadGetInitialProps (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-server/dist/lib/utils.js:45:35)
    at Object.renderToHTML (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-server/dist/server/render.js:82:33)
    at process._tickCallback (internal/process/next_tick.js:68:7)
TypeError: Cannot call a class as a function
    at _classCallCheck (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/react-thunk/dist/commonjs/index.js:15:99)
    at ReactThunk (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/react-thunk/dist/commonjs/index.js:36:13)
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:604:14
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:648:47
    at createStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:85:33)
    at initStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:1828:67)
    at getOrCreateStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:135:75)
    at _callee$ (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:165:34)
    at tryCatch (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:567:24)
    at _next (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:589:9)
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:596:7
    at new Promise (<anonymous>)
    at new F (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/core-js/library/modules/_export.js:36:28)
    at Function.<anonymous> (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:585:12)
    at Function.getInitialProps (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:195:37)
    at Object.loadGetInitialProps (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-server/dist/lib/utils.js:45:35)
    at Object.renderToHTML (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-server/dist/server/render.js:82:33)
    at process._tickCallback (internal/process/next_tick.js:68:7)
GET / 500 3908.827 ms - -
TypeError: Cannot call a class as a function
    at _classCallCheck (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/react-thunk/dist/commonjs/index.js:15:99)
    at ReactThunk (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/react-thunk/dist/commonjs/index.js:36:13)
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:604:14
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:648:47
    at createStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:85:33)
    at initStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:1828:67)
    at getOrCreateStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:135:75)
    at _callee$ (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:165:34)
    at tryCatch (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:567:24)
    at _next (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:589:9)
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:596:7
    at new Promise (<anonymous>)
    at new F (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/core-js/library/modules/_export.js:36:28)
    at Function.<anonymous> (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:585:12)
    at Function.getInitialProps (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:195:37)
    at Object.loadGetInitialProps (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-server/dist/lib/utils.js:45:35)
    at Object.renderToHTML (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-server/dist/server/render.js:82:33)
TypeError: Cannot call a class as a function
    at _classCallCheck (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/react-thunk/dist/commonjs/index.js:15:99)
    at ReactThunk (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/react-thunk/dist/commonjs/index.js:36:13)
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:604:14
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:648:47
    at createStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/redux/lib/redux.js:85:33)
    at initStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:1828:67)
    at getOrCreateStore (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:135:75)
    at _callee$ (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:165:34)
    at tryCatch (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:567:24)
    at _next (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:589:9)
    at /Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:596:7
    at new Promise (<anonymous>)
    at new F (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/core-js/library/modules/_export.js:36:28)
    at Function.<anonymous> (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:585:12)
    at Function.getInitialProps (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/.next/server/static/development/pages/_app.js:195:37)
    at Object.loadGetInitialProps (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-server/dist/lib/utils.js:45:35)
    at Object.renderToHTML (/Users/antoniopavicevac-ortiz/Dropbox/developer_folder/hillfinder/node_modules/next-server/dist/server/render.js:82:33)
GET /favicon.ico 500 3.482 ms - -

以下是一些可能的竞争者：

我的pages/_app.js文件：

import React from 'react'
import { Provider } from 'react-redux'
import App from 'next/app'
import withRedux from 'next-redux-wrapper'
import { initStore } from '../store'

export default withRedux(initStore)(
 class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
   return {
    pageProps: Component.getInitialProps
     ? await Component.getInitialProps(ctx)
     : {}
   }
  }

  render() {
   const { Component, pageProps, store } = this.props
   return (
    <Provider store={store}>
     <Component {...pageProps} />
    </Provider>
   )
  }
 }
)

我的pages/index.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { auth } from '../store/index.js'
import Head from '../components/head'
import HomeLayout from '../components/Home/Home'
import 'semantic-ui-css/semantic.min.css'
import '../styles/styles.scss'


class Home extends Component {
 static getInitialProps({ reduxStore }) {
  reduxStore.dispatch(auth)
  return {}
 }

 componentDidMount() {
  const { dispatch } = this.props
 }

 componentWillUnmount() {
 }

 render() {
  return (
   <div>
    <Head title='Home' />
    <HomeLayout />
   </div>
  )
 }
}



export default connect()(Home)

我刚刚扔了我的store/index.js文件：

import { createStore, applyMiddleware } from 'redux';
import { createLogger } from 'redux-logger'
import { composeWithDevTools } from 'redux-devtools-extension';
import thunkMiddleware from 'react-thunk';

/* InitialState */

var InitialState = {
    isLoggedIn: false,
    currentUserLoggedIn: '',
}

/* ACTION TYPES */

export var actionTypes = {
    GET_USER: 'GET_USER'
}

export var getUser = function getUser(user) {
    return {
        type: GET_USER,
        user: user
    };
};

export var auth = (username_email, password) =>
    dispatch => {
        return window.fetch('http://localhost:8016/users/login', {
                method: 'POST',
                headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
                body: JSON.stringify({ username_email: username_email, password: password })
            })
            .then((response) => {
                if (response.status === 200) {
                    return dispatch(getUser(response.json()))
                } else {
                    if (response.status === 401) {
                        console.log("response.status ", response.status);
                        return;
                    }
                }
                return response;
            })
            .catch(error =>
                dispatch(getUser({ error })));
    }


// REDUCERS
export const reducer = (state = InitialState, action) => {
    switch (action.type) {
        case actionTypes.GET_USER:
            return Object.assign({}, state, {
                isLoggedIn: true,
                currentUserLoggedIn: action.user
            })

        default:
            return state
    }
}

export var initStore = (initialState = InitialState) => {
    return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware, createLogger({ collapsed: true }))))
}

我想我只需要一双额外的眼睛！