Uncaught TypeError: Super expression must either be null or a function

Question

所以我是 React 的新手，尽管我发现其他多个人也有同样的问题，但我仍然没有在我的代码中发现错误。所以我求助于你 Whosebug，你是我唯一的希望！

我正在学习，所以我想创建一个简单的 ReactJS 应用程序来处理 HTTP 请求。完成代码后我遇到了错误：

Uncaught TypeError: Super expression must either be null or a function, not object at exports.default (inherits.js?0578:21) at eval (app.js?71f7:22)

即使我尝试了很多不同的更改，错误仍然存在，我相当确定它与 imports/exports 有关，因为这是很多其他来源告诉我的，尽管仔细检查了导入等没有产生任何结果。

代码：

app.js（处理简单按钮的呈现，并应在单击时执行简单的 GET 请求）

import React, { Component } from 'react'

import { connect } from 'react-redux' 
import { createServerSagaRequest } from '../saga/serverSaga'
import { incrRequestAmount, requestSelector } from '../reducer/requestReducer'


const mapStateToProps = (state) => {
  return {
    getRequestAmount: requestSelector.requests(state),
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    open: (url, data, action, method) => dispatch(createServerSagaRequest((url, data, action, method))),
    requests: () => dispatch(incrRequestAmount()),
  }
}


class App extends React {

  constructor(props){
    super(props)
  }

  _buttonClick() {
    this.props.requests()
    this.props.open("http://mvctestproject.local/GetData", "TestDataFraGet", action, "GET")  
  }

  render(){    
    return (
      <button
      className="btn btn-default"
      onClick={this._buttonClick()}>{this.props.getRequestAmount()}
      </button>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

serverSaga.js (my saga which can access the reducer and service)

import React, { Component } from 'react'
import { put, call, take, fork, select } from 'redux-saga/effects'
import { callServer } from '../service/serverService'
import { incrRequestAmount, requestSelector } from '../reducer/requestReducer'

export function createServerSagaRequest() {return { type: CREATE_REQUEST }}


function* handleRequest(url, data, action, method, success){

  incrRequestAmount()

  return yield executeRequest(url, data, action, method, success)
}


function* executeRequest(url, data, action, method, success) {

    let response = yield call(callServer, url, method, data)
    let responseSuccess = response && response.Succeeded
    return 
}

export default function* serverSaga(){
  yield [
    fork(function*(){
      yield call (CREATE_REQUEST, handleRequest) 
    }),
  ]
}

rootSaga.js（将 sagas 分组 - 以防我制作更多）

import { fork } from 'redux-saga/effects'

import serverSaga from './serverSaga'

export default function* rootSaga(){
  yield [
    fork(serverSaga)
  ]
}

requestReducer.js（唯一的功能是每次请求后增加一个变量）

import { fromJS } from 'immutable'


export function incrRequestAmount() {return {type: 'INCR_REQUESTS'}}


const initialState = {
  requestAmount: 0
}

function requestReducer(state = fromJS(initialState), action){
  switch(action.type){
    case 'INCR_REQUESTS':
      return state.updateIn(["requestAmount"], (requests) => requests++)
    default:
      return state
  }
}

export const requestSelector = {
  amount: state => state.requests.get('requestAmount')
}

export default requestReducer

reducers.js（对减速器进行分组 - 以防我做更多）

import { combineReducers } from 'redux'
import React, { Component } from 'react'

import requests from './requestReducer'

export default combineReducers({
  requests,
})

serverService.js ( 处理对服务器的调用 (GET/POST)

import React, { Component } from 'react'

export function callServer(url, bodyData, method){

  let methodType = method.toLowerCase()

  return new Promise((resolve, reject) => {
    let r;
    switch (methodType){
      case 'post':
        r = {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(bodyData)
        }
        break;
      case 'get':
        r = {
          method: 'GET'
        }
        break;
    }


    if (r) {

      console.log("URL: ", url)

      fetch(url, r)
        .then((response) => {
          console.log("Resp: ", url, response)
          return response.json()
        })


    }
  })
}

Answer 1

您需要扩展 React.Component 来创建组件，而不是 React 本身：

class App extends React {

应该是

class App extends React.Component {

，或者因为您直接导入了 Component

class App extends Component {

Uncaught TypeError: Super expression must either be null or a function

Uncaught TypeError: Super expression must either be null or a function

python

ecmascript-6

reactjs

redux-saga

react-redux